为了账号安全,请及时绑定邮箱和手机立即绑定

纯css写出爱心版加载效果,等待加载也是一种享受

标签:
Html/CSS


现在互联网时代网站何其多,各有各得风格,但是什么样的风格能留住用户的停留观看呢?就从加载来说,很多加载效果都是同一种风格可能用户经常逛网站早已经习惯,要是你的加载时间比其他网站时间长,效果还是一样的,可能就会关掉你的网站去其他网站观看,但是如果你的加载效果别具一格,有特点,可能用户看你加载效果的时候你的网站就打开了,这样用户也就不会立刻关掉你的网站。

html代码:

<div class="flex-container">  <div class="unit">    <div class="heart">      <div class="heart-piece-0"></div>      <div class="heart-piece-1"></div>      <div class="heart-piece-2"></div>      <div class="heart-piece-3"></div>      <div class="heart-piece-4"></div>      <div class="heart-piece-5"></div>      <div class="heart-piece-6"></div>      <div class="heart-piece-7"></div>      <div class="heart-piece-8"></div>    </div>    <p>equal love</p>  </div></div>

css代码:

  <style>    @import url("https://fonts.googleapis.com/css?family=Lato:100");html,body {  width: 100%;  height: 100%;}.flex-container {  width: 100%;  height: 100%;  position: relative;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;      flex-wrap: wrap;  -webkit-box-pack: center;      -ms-flex-pack: center;          justify-content: center;  -webkit-box-align: center;      -ms-flex-align: center;          align-items: center;}body {  background-color: #262e6f;}.unit {  text-align: center;}.unit p {  margin-top: 100px;  font-family: 'Lato', sans-serif;  font-weight: 100;  text-transform: uppercase;  color: #fff;}.heart {  position: relative;  font-size: 0;  width: 138px;}[class*="heart-piece-"] {  position: absolute;  top: -5px;  width: 10px;  height: 10px;  border-radius: 5px;}.heart-piece-4 {  -webkit-animation: piece-4 3.2s infinite;          animation: piece-4 3.2s infinite;}.heart-piece-3,.heart-piece-5 {  -webkit-animation: piece-3 3.2s infinite;          animation: piece-3 3.2s infinite;}.heart-piece-2,.heart-piece-6 {  -webkit-animation: piece-2 3.2s infinite;          animation: piece-2 3.2s infinite;}.heart-piece-1,.heart-piece-7 {  -webkit-animation: piece-1 3.2s infinite;          animation: piece-1 3.2s infinite;}.heart-piece-0,.heart-piece-8 {  -webkit-animation: piece-0 3.2s infinite;          animation: piece-0 3.2s infinite;}.heart-piece-0 {  left: 0px;  -webkit-animation-delay: 0s;          animation-delay: 0s;  background-color: #ec2d73;}.heart-piece-1 {  left: 16px;  -webkit-animation-delay: 0.15s;          animation-delay: 0.15s;  background-color: #eb5324;}.heart-piece-2 {  left: 32px;  -webkit-animation-delay: 0.3s;          animation-delay: 0.3s;  background-color: #fdc800;}.heart-piece-3 {  left: 48px;  -webkit-animation-delay: 0.45s;          animation-delay: 0.45s;  background-color: #47b264;}.heart-piece-4 {  left: 64px;  -webkit-animation-delay: 0.6s;          animation-delay: 0.6s;  background-color: #1470bd;}.heart-piece-5 {  left: 80px;  -webkit-animation-delay: 0.75s;          animation-delay: 0.75s;  background-color: #76469a;}.heart-piece-6 {  left: 96px;  -webkit-animation-delay: 0.9s;          animation-delay: 0.9s;  background-color: #ec2d73;}.heart-piece-7 {  left: 112px;  -webkit-animation-delay: 1.05s;          animation-delay: 1.05s;  background-color: #eb5324;}.heart-piece-8 {  left: 128px;  -webkit-animation-delay: 1.2s;          animation-delay: 1.2s;  background-color: #fdc800;}@-webkit-keyframes piece-4 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 94px;    top: -23px;  }}@keyframes piece-4 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 94px;    top: -23px;  }}@-webkit-keyframes piece-3 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 90px;    top: -31px;  }}@keyframes piece-3 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 90px;    top: -31px;  }}@-webkit-keyframes piece-2 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 80px;    top: -37px;  }}@keyframes piece-2 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 80px;    top: -37px;  }}@-webkit-keyframes piece-1 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 60px;    top: -31px;  }}@keyframes piece-1 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 60px;    top: -31px;  }}@-webkit-keyframes piece-0 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 30px;    top: -15px;  }}@keyframes piece-0 {  0%, 10%, 90%, 100% {    height: 10px;    top: -5px;  }  45%, 55% {    height: 30px;    top: -15px;  }}  </style>


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消