最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3实现加载中的动画效果例子
时间:2022-06-25 13:39:54 编辑:袖梨 来源:一聚教程网
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;
}
}
相关文章
- 光遇12.4大蜡烛在哪里 12-04
- 重返未来1999芭卡洛儿怎么样 12-04
- 无限暖暖心愿金蔷薇怎么样 12-04
- 王者荣耀星之破晓先遣测试停服 12-04
- 光遇12.4大蜡烛在哪里 光遇12月4日大蜡烛位置攻略 12-04
- 无限暖暖公测兑换码有哪些 无限暖暖公测版本兑换码介绍 12-04