[css3特效]loading加载中


以前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">
	<span class="loading">
		<span class="bar1"></span>
		<span class="bar2"></span>
		<span class="bar3"></span>
		<span class="bar4"></span>
		<span class="bar5"></span>
		<span class="bar6"></span>
		<span class="bar7"></span>
		<span class="bar8"></span>
		<span class="bar9"></span>
		<span class="bar10"></span>
		<span class="bar11"></span>
		<span class="bar12"></span>
	</span>
	<label style="cursor:pointer;">正在加载</label>
</div>

8 responses on “[css3特效]loading加载中

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>