使用css實(shí)現(xiàn)圓形波浪效果圖

2024-07-11 08:31:31

字體：大中小

供稿：網(wǎng)友

在移動(dòng)端經(jīng)?？吹揭恍﹫A形波浪圖來(lái)顯示金額，剛開(kāi)始我認(rèn)為這種效果只能用canvas寫(xiě)的，后來(lái)發(fā)現(xiàn)用css也可以。

原理：我們都知道讓塊元素的border-radius:50%會(huì)變成圓形，如果少于50%呢，其實(shí)就變成不規(guī)則的圓形。我們可以利用這個(gè)特征，用偽類加上transform動(dòng)畫(huà)來(lái)實(shí)現(xiàn)波浪效果。

先看一下效果圖：

//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); }}//或者使用預(yù)編譯語(yǔ)言更方便，這里使用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; }}//調(diào)用.wave-box { .wave(200px; 200px; #76daff);}<div class="wave-box"></div>

總結(jié)

以上所述是小編給大家介紹的使用css實(shí)現(xiàn)圓形波浪效果圖，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！

上一篇：flex布局實(shí)現(xiàn)左側(cè)文字溢出省略右側(cè)文字自適應(yīng)

下一篇：純css實(shí)現(xiàn)元素下出現(xiàn)橫線動(dòng)畫(huà)（background-image）