CSS3動畫（一）：5種預載動畫效果
- 高洛峰原創
- 2017-02-17 13:21:011979瀏覽
實現如圖所示的動畫效果：
預載動畫一：雙旋圈
在兩個不同方向旋轉的圓圈。我們對內圈的轉速定義了一個CSS代碼，即內圈比外圈的速率快2倍。
實作如圖所示：
html程式碼：
<body style="background: #ffb83c;"> <p id="preloader-1"> <span></span> <span></span> </p></body>
css程式碼：
#preloader-1{
position: relative;
}#preloader-1 span{
position: absolute;
border:8px solid #fff;
border-top:8px solid transparent;
border-radius: 999px;
}#preloader-1 span:nth-child(1){
width:80px;
height: 80px;
animation: spin-1 2s infinite linear;
}#preloader-1 span:nth-child(2){
top:20px;
left:20px;
width:40px;
height: 40px;
animation: spin-2 1s infinite linear;
}@keyframes spin-1{
0%{transform: rotate(360deg); opacity: 1.0;}
50%{transform: rotate(180deg); opacity: 0.5;}
100%{transform: rotate(0deg);opacity: 0;}}
@keyframes spin-2{
0%{transform: rotate(0deg); opacity: 0.5;}
50%{transform: rotate(180deg); opacity: 1;}
100%{transform: rotate(360deg);opacity: 0.5;}}動畫進行交錯每個圓圈都設定了單獨的反向移動動畫參數。 效果：
html代碼：
<body style="background: #4ad3b4;"> <p id="preloader-2"> <span></span> <span></span> </p></body>css代碼：
#preloader-2{
position: relative;
}#preloader-2 span{
position: absolute;
width:30px;
height: 30px;
background: #fff;
border-radius: 999px;
}#preloader-2 span:nth-child(1){
animation: cross-1 1.5s infinite linear;
}#preloader-2 span:nth-child(2){
animation: cross-2 1.5s infinite linear;
}@keyframes cross-1{
0%{transform: translateX(0); opacity: 0.5;}
50%{transform: translateX(80px); opacity: 1;}
100%{transform: translateX(0);opacity: 0.5;}}
@keyframes cross-2{
0%{transform: translateX(80px); opacity: 0.5;}
50%{transform: translateX(0); opacity: 1;}
100%{transform: translateX(80px);opacity: 0.5;}} html代碼：
<body style="background: #ab69d9;"> <p id="preloader-3"> <span></span> </p></body>
css代碼：
#preloader-3{
position: relative;
width:80px;
height: 80px;
border:4px solid rgba(255,255,255,.25);
border-radius: 999px;
}#preloader-3 span{
position: absolute;
width:80px;
height:80px;
border:4px solid transparent;
border-top:4px solid #fff;
border-radius: 999px;
top:-4px;
left:-4px;
animation: rotate 1s infinite linear;
}@keyframes rotate{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}}
效果：
html代碼：<body style="background: #c1d64a;"> <p id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </p></body>css代碼：
蟎
#preloader-4{
position: relative;
}#preloader-4 span{
position:absolute;
width:16px;
height: 16px;
border-radius: 999px;
background: #fff;
animation: bounce 1s infinite linear;
}#preloader-4 span:nth-child(1){
left:0;
animation-delay: 0s;
}#preloader-4 span:nth-child(2){
left:20px;
animation-delay: 0.25s;
}#preloader-4 span:nth-child(3){
left:40px;
animation-delay: 0.5s;
}#preloader-4 span:nth-child(4){
left:60px;
animation-delay: 0.75s;
}#preloader-4 span:nth-child(5){
left:80px;
animation-delay: 1.0s;
}@keyframes bounce{
0%{transform: translateY(0px);opacity: 0.5;}
50%{transform: translateY(-30px);opacity: 1.0;}
100%{transform: translateY(0px);opacity: 0.5;}} 設定相同的淡入淡出效果，再予每個稍微延遲下即可實現。 
效果：
<body style="background: #f9553f;"> <p id="preloader-5"> <span></span> <span></span> <span></span> </p></body>css代碼：
#preloader-5{
position: relative;
}#preloader-5 span{
position:absolute;
width:50px;
height: 50px;
border:5px solid #fff;
border-radius: 999px;
opacity: 0;
animation: radar 2s infinite linear;
}#preloader-5 span:nth-child(1){
animation-delay: 0s;
}#preloader-5 span:nth-child(2){
animation-delay: 0.66s;
}#preloader-5 span:nth-child(3){
animation-delay: 1.33s;
}@keyframes radar{
0%{transform: scale(0);opacity: 0;}
25%{transform: scale(0);opacity: 0.5;}
50%{transform: scale(1);opacity: 1.0;}
75%{transform: scale(1.5);opacity: 0.5;}
100%{transform: scale(2);opacity: 0;}}
css代碼：
rrreee
css代碼：
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS3詳解：transform下一篇：CSS3詳解：transform