摘要:在移動端經(jīng)常看到一些圓形波浪圖來顯示金額,剛開始我認(rèn)為這種效果只能用寫的,后來發(fā)現(xiàn)用也可以。原理我們都知道讓塊元素的會變成圓形,如果少于呢,其實就變成不規(guī)則的圓形。我們可以利用這個特征,用偽類加上動畫來實現(xiàn)波浪效果。
在移動端經(jīng)常看到一些圓形波浪圖來顯示金額,剛開始我認(rèn)為這種效果只能用canvas寫的,后來發(fā)現(xiàn)用css也可以。
原理:我們都知道讓塊元素的
border-radius:50%
會變成圓形,如果少于50%呢,其實就變成不規(guī)則的圓形。我們可以利用這個特征,用偽類加上transform動畫來實現(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ù)編譯語言更方便,這里使用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);
}
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/1465.html
摘要:表示圓形漸變,說的簡單點就是畫一個圓。表示容器最右邊,表示容器最上邊,換言之就是右上角。實現(xiàn)波浪邊框上代碼,增加一個樣式即可此處沒有字樣,表示原點在容器中心位置,,表示半徑范圍內(nèi)是顏色,半徑到范圍內(nèi)是顏色,半徑大于是顏色。 前言 大佬給了一張優(yōu)惠券圖片(如下圖),我一看,這波浪型的邊框和內(nèi)倒角用css寫不出來吧,遂向大佬說明并要ui切圖,大佬回答:css3可以實現(xiàn)。好吧,大佬都說可以實...
摘要:同行這么做使用實現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時候,遇到圓形進(jìn)度條的需求。實現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項目的標(biāo)題。 閑話圖片上傳 - 掘金作者:孫輝,美團金融前端團隊成員。15年畢業(yè)加入美團,相信技術(shù),更相信技術(shù)只是大千世界里知識的一種,個人博客: https://sunyuhui.com ...
摘要:同行這么做使用實現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時候,遇到圓形進(jìn)度條的需求。實現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項目的標(biāo)題。 閑話圖片上傳 - 掘金作者:孫輝,美團金融前端團隊成員。15年畢業(yè)加入美團,相信技術(shù),更相信技術(shù)只是大千世界里知識的一種,個人博客: https://sunyuhui.com ...
摘要:在此,特地列舉一些里比較容被忽略的小知識,希望能對你有所幫助。橢圓的實現(xiàn)跟圓形的實現(xiàn)一樣,這里也是用到屬性,但是你可能不知道,是一個簡寫屬性,可以單獨為四個角分別設(shè)置水平和垂直半徑,只要用到一個正斜杠即可。 css是一門功能強大、具備完整生態(tài)的復(fù)雜語言。它擁有很多的技巧, 但是生活工作中我們可能不怎么會接觸到,這包括一些實際上挺實用的技巧。在此,特地列舉一些css里比較容被忽略的小知識...
摘要:層疊即表示允許以多種方式來描述樣式,一個元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過程持續(xù)一段時間,而不是立即生效。比如,將元素的顏色從白色改為黑色,通常這個改變是立即生效的,使用后,將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
閱讀 3817·2021-11-18 13:19
閱讀 1169·2021-10-11 10:58
閱讀 3278·2019-08-29 16:39
閱讀 3130·2019-08-26 12:08
閱讀 2026·2019-08-26 11:33
閱讀 2453·2019-08-23 18:30
閱讀 1298·2019-08-23 18:21
閱讀 2515·2019-08-23 18:18