[CSS3學習]用CSS3做一個圓圈等待條動畫效果
阿新 • • 發佈：2019-01-01
前面學習瞭如何用CSS3繪製一個自定義的扇形，現在想利用那個扇形加上動畫方法來實現一種圓圈等待條動畫效果，算是該方法的一種應用吧。
目標：用CSS3實現一種圓圈等待條動畫效果
想法：
- 和之前描繪扇形不同，這次繪製牽扯到大於半圓的扇形，可以同樣的方法繪製兩個半圓進行組合實現；
- 分別給兩個半圓新增animation動畫；
- 對兩個半圓的動畫進行調整，使其無縫切換。
程式碼：
首先先實現繪製大於半圓的扇形
HTML：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>大扇形</title> </head> <body> <div class="father" id="leftFahter"> <div class="child" id="leftChild"></div> </div> <div class="father" id="rightFather"> <div class="child" id="rightChild"></div> </div> </body> </html>
CSS：
.father { position:absolute; width:100px; height:100px; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; border-radius:50%; } .child { position:absolute; width:100px; height:100px; background:red; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; -ms-border-radius:50%; border-radius:50%; } #leftFahter{ clip: rect(0px 50px 100px 0px); } #rightFather{ clip:rect(0px 100px 100px 50px); } #leftChild { clip: rect(0px 100px 100px 50px); transform:rotate(180deg); } #rightChild { clip:rect(0px 50px 100px 0px); -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); -o-transform:rotate(60deg); -ms-transform:rotate(60deg); transform:rotate(60deg); }
其效果如下：
然後我們再給其加上動畫，讓其左右配合旋轉，最後達到等待條的效果，此外，也可以通過border來實現圓環效果，程式碼如下：
最終效果如下：傳送門.father { position:absolute; width:100px; height:100px; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; border-radius:50%; } .child { position:absolute; width:60px; height:60px; border:20px red solid; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; -ms-border-radius:50%; border-radius:50%; -moz-animation:move 2s linear infinite; -webkit-animation:move 2s linear infinite; -o-animation:move 2s linear infinite; -ms-animation:move 2s linear infinite; animation:move 2s linear infinite; } #leftFahter{ clip: rect(0px, 50px, 100px, 0px); } #rightFather{ clip:rect(0px, 100px, 100px, 50px); } #leftChild { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; -o-animation-delay:0.5s; -ms-animation-delay:0.5s; animation-delay:0.5s; clip: rect(0px, 100px, 100px, 50px); } #rightChild { clip:rect(0px, 50px, 100px, 0px); } @keyframes move{ 0% {transform:rotate(0deg);} 25% {transform:rotate(180deg);} 50% {transform:rotate(180deg);} 75% {transform:rotate(360deg);} 100% {transform:rotate(360deg);} } @-moz-keyframes move{ 0% {transform:rotate(0deg);} 25% {transform:rotate(180deg);} 50% {transform:rotate(180deg);} 75% {transform:rotate(360deg);} 100% {transform:rotate(360deg);} } @-webkit-keyframes move{ 0% {transform:rotate(0deg);} 25% {transform:rotate(180deg);} 50% {transform:rotate(180deg);} 75% {transform:rotate(360deg);} 100% {transform\:rotate(360deg);} } @-o-keyframes move{ 0% {transform:rotate(0deg);} 25% {transform:rotate(180deg);} 50% {transform:rotate(180deg);} 75% {transform:rotate(360deg);} 100% {transform:rotate(360deg);} } @-ms-keyframes move{ 0% {transform:rotate(0deg);} 25% {transform:rotate(180deg);} 50% {transform:rotate(180deg);} 75% {transform:rotate(360deg);} 100% {transform:rotate(360deg);} }