简要教程
这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作,它代码简单,效果非常的炫酷。
使用方法
HTML结构
使用一个
元素作为该loading动画的容器,里面有两个子元素。其中div.loading-1是loading进度条。div.loading-2是loading文字。
1 2 3 4 | < div class = "loader" >
< div class = "loading-1" ></ div >
< div class = "loading-2" >Loading...</ div >
</ div >
|
Salin selepas log masuk
CSS样式
该loading动画中使用了3个animation动画,第一个load动画是用于进度条从0运动到100%。第二个turn动画用于进度条在Y轴方向上旋转。第三个bounce动画用于文字的弹跳。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | .loader {
width : 150px ;
margin : 50px auto 70px ;
position : relative ;
}
.loader .loading -1 {
position : relative ;
width : 100% ;
height : 10px ;
border : 1px solid #69d2e7 ;
border-radius: 10px ;
animation: turn 4 s linear 1.75 s infinite;
}
.loader .loading -1: before {
content : "" ;
display : block ;
position : absolute ;
width : 0% ;
height : 100% ;
background : #69d2e7 ;
box-shadow: 10px 0px 15px 0px #69d2e7 ;
animation: load 2 s linear infinite;
}
.loader .loading -2 {
width : 100% ;
position : absolute ;
top : 10px ;
color : #69d2e7 ;
font-size : 22px ;
text-align : center ;
animation: bounce 2 s linear infinite;
}
@keyframes load {
0% {
width : 0% ;
}
87.5% , 100% {
width : 100% ;
}
}
@keyframes turn {
0% {
transform: rotateY( 0 deg);
}
6.25% , 50% {
transform: rotateY( 180 deg);
}
56.25% , 100% {
transform: rotateY( 360 deg);
}
}
@keyframes bounce {
0% , 100% {
top : 10px ;
}
12.5% {
top : 30px ;
}
}
|
Salin selepas log masuk
以上就是超酷CSS3 loading加载动画特效的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn