每日计划-html+css作品：一个加载动画
2020-12-13 02:56
标签：style blog class code java ext 动画挺简单，关键是渐隐渐现的次序及时间 那个缩放可以去掉的，懒得调了... 每日计划-html+css作品：一个加载动画,搜素材,soscw.com 每日计划-html+css作品：一个加载动画 标签：style blog class code java ext 原文地址：http://www.cnblogs.com/hualongbei/p/3721788.html
style>
#show {
height : 140px;
width : 150px;
margin:auto;
margin-top:45%;
transform: scale(2,2)
}
#load {font-family : Arial; text-align : center; padding-top:20px; }
.t{
height:30px;
width:30px;
float:left;
background-color:black;
opacity : 0;
animation : transform 4s infinite;
position:absolute;
}
#transform{margin-top:30px; width:100%; position:relative; }
#t1 { left:20px;}
#t2 {left:60px; animation-delay : 0.5s;}
#t3 {left:100px; animation-delay : 1s;}
@keyframes transform {
0% { opacity : 0;}
20% { opacity : 1;}
40% { opacity : 0;}
60% { opacity : 0;}
80% { opacity : 1;}
100% { opacity : 0;}
}
style>
div id="show">
div id="load">
loading...
div>
div id="transform">
div class="t" id="t1"> div>
div class="t" id="t2">div>
div class="t" id="t3">div>
div>
下一篇：网页换肤效果的实现原理