作者:zccst\r\n\r\n以前loading都是一张图片,显示或隐藏。\r\n现在如果考虑移动端弱网到连图片也载入不成功,此时css3的loading就非常有用了,而且模拟了图片效果,节省空间。\r\n\r\n基本原理:\r\n1,外部一个span,固定宽高(正方形),行内块元素,相对定位,垂直对齐。\r\n2,内部12个span,相对宽高(相对外部),行内块元素,绝对定位(top,left),颜色,背景色,动画(最重...
作者:zccst
以前loading都是一张图片,显示或隐藏。
现在如果考虑移动端弱网到连图片也载入不成功,此时css3的loading就非常有用了,而且模拟了图片效果,节省空间。
基本原理:
1,外部一个span,固定宽高(正方形),行内块元素,相对定位,垂直对齐。
2,内部12个span,相对宽高(相对外部),行内块元素,绝对定位(top,left),颜色,背景色,动画(最重要,作用是颜色从重变浅)
3,每一个span单独写css,目的是位置(通过rotate和translate)和延迟时间(animation-delay)。
目测,每一个span里color多余,内部12个公共span的border-radius多余。
<style type="text/css">
.load2 {padding:15px 0;text-align:center;font-size:14px;background:#ffffff;height: 25px;}
@-webkit-keyframes loading {
from {opacity: 1;}
to {opacity: 0.2;}
}
.loading {display: inline-block;margin-right:20px;position: relative;width: 12px;height:12px;vertical-align:7px;}
.loading span {display:inline-block;width: 20%;height: 40%;color:#ff7800;background: #ff7800;position: absolute;left: 100%;top: 100%;opacity: 0;-webkit-animation: loading 0.9s linear infinite;-webkit-border-radius: 30px;}
.loading .bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;color:#ff7800;}
.loading .bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;color:#ff7800;}
.loading .bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;color:#ff7800;}
.loading .bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;color:#ff7800;}
.loading .bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;color:#ff7800;}
.loading .bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;color:#ff7800;}
.loading .bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;color:#ff7800;}
.loading .bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
.loading .bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;color:#ff7800;}
.loading .bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;color:#ff7800;}
.loading .bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;color:#ff7800;}
.loading .bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;color:#ff7800;}
</style>
<div class="load2">
<label style="cursor:pointer;">正在加载</label>
</div>
本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!
本站主要用于日常笔记的记录和生活日志。本站不保证所有内容信息可靠!(大多数文章属于搬运!)如有版权问题,请联系我立即删除:“abcdsjx@126.com”。
QQ: 1164453243
邮箱: abcdsjx@126.com