在移動端經常看到一些圓形波浪圖來顯示金額，剛開始我認為這種效果只能用canvas寫的，后來發現用css也可以。
原理：我們都知道讓塊元素的border-radius:50%會變成圓形，如果少于50%呢，其實就變成不規則的圓形。我們可以利用這個特征，用偽類加上transform動畫來實現波浪效果。
先看一下效果圖：
//css代碼
.wave { position: relative; width: 200px; height: 200px; background: @color; border: 5px solid #76daff; border-radius: 50%; overflow: hidden;}.wave-box::before,.wave-box::after { content: ''; position: absolute; top: 0; left: 50%; width: 400px; height: 400px; border-radius: 45%; -webkit-transform: translate(-50%, -70%); transform: translate(-50%, -70%); background: rgba(255, 255, 255, 0.5); -webkit-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; z-index: 10;}@keyframes rotate { 50% { -webkit-transform: translate(-50%, -75%) rotate(180deg); transform: translate(-50%, -75%) rotate(180deg); } 100% { -webkit-transform: translate(-50%, -70%) rotate(180deg); transform: translate(-50%, -70%) rotate(180deg); }}//或者使用預編譯語言更方便，這里使用less.wave(@width; @height; @color) { position: relative; width: @width; height: @height; background: @color; border: 5px solid @color; border-radius: 50%; overflow: hidden; &::before, &::after { content: ''; position: absolute; top: 0; left: 50%; width: @width * 2; height: @height * 2; border-radius: 45%; transform: translate(-50%, -70%); background: rgba(255,255,255,0.5); animation: rotate 10s linear infinite; z-index: 10; } &::after { border-radius: 47%; background: rgba(255,255,255,0.5); animation: rotate 10s linear -5s infinite; z-index: 20; }}//調用.wave-box { .wave(200px; 200px; #76daff);}<!-- 頁面上調用 --><div class="wave-box"></div>總結
以上所述是小編給大家介紹的使用css實現圓形波浪效果圖 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
