本篇内容主要讲解“怎么用CSS3实现进度加载动画”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用CSS3实现进度加载动画”吧!
先看看效果图:
CSS Code复制内容到剪贴板
#loader1,
#loader1:before,
#loader1:after {
background: #f2fa08;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
#loader1:before,
#loader1:after {
position: absolute;
top: 0;
content: '';
}
#loader1:before {
left: -1.5em;
}
#loader1 {
text-indent: -9999em;
margin: 50px 50px;
position: relative;
float: left;
font-size: 11px;
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
#loader1:after {
left: 1.5em;
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #f2fa08;
height: 4em;
}
40% {
box-shadow: 0 -2em #f2fa08;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #f2ff08;
height: 4em;
}
40% {
box-shadow: 0 -2em #f2ff08;
height: 5em;
}
}
到此,相信大家对“怎么用CSS3实现进度加载动画”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!