最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3实现加载中的动画效果例子
时间:2015-05-29 编辑:简简单单 来源:一聚教程网
Loading 的菊花图形组合的不太好,基本上实现这个功能了
动画解析
这个动画用到的 CSS3 特性:
transform 主要使用 transform 属性的 rotate,将线条组合成 Loading 图形 (也就是常见的菊花图形)
animation 实现将线条颜色由浅到深,再由深到浅来回变换的动画,通过 animation-delay 属性来使颜色的变换产生过渡的效果,从而达到类似于 Loading 动画的效果
效果实例
HTML Code
CSS Code
.loading {
margin: 0 auto;
position: relative;
}
span {
background-color: #ccc;
position: absolute;
left: 38px;
-webkit-animation: loading 1s infinite;
}
.line1 {
background-color: #000;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-delay: .3s;
}
.line2 {
top: 5px;
left: 52px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-delay: .4s;
}
.line3 {
top: 18px;
left: 57px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: .5s;
}
.line4 {
top: 31px;
left: 52px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-animation-delay: .6s;
}
.line5 {
top: 37px;
-webkit-animation-delay: .7s;
}
.line6 {
top: 32px;
left: 24px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-animation-delay: .8s;
}
.line7 {
top: 18px;
left: 19px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation-delay: .9s;
}
.line8 {
top: 5px;
left: 24px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-delay: 1s;
}
@-webkit-keyframes loading {
0% {
background-color: #ccc;
}
50% {
background-color: #000;
}
100% {
background-color: #ccc;
}
}
-
上一个: CSS3实现图片折角效果例子
-
下一个: CSS3中实现文字扫光效果代码
相关文章
- CSS3制作loading加载动画效果代码 10-24
- css3实现动画加载效果例子 08-03
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26