建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
筆者就來(lái)帶大家介紹如何用css3實(shí)現(xiàn) H5-Dooring編輯器 中的水波動(dòng)畫(huà)。
十載的吉木乃網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整吉木乃建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“吉木乃網(wǎng)站設(shè)計(jì)”,“吉木乃網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
由于生成gif的工具比較弱(在線(xiàn)求好用的mac版gif錄頻生成工具...), 我不得不上傳個(gè)原圖, 大家自行腦補(bǔ).
接下來(lái)我們來(lái)研究實(shí)現(xiàn)原理和實(shí)現(xiàn)方式。
動(dòng)畫(huà)拆解
要想用純css實(shí)現(xiàn)曲線(xiàn), 我們第一反應(yīng)就是用border-radius這個(gè)屬性, 比如說(shuō)實(shí)現(xiàn)一個(gè)圓, 我們只需要如下設(shè)置:
.circle {
border-radius: 50%;
}實(shí)現(xiàn)橢圓,扇形, 半橢圓這些, 只需要設(shè)置不同邊的圓角即可, 如下:
.circle {
border-radius: 50% 100% 40% 60%;
}以上的代碼效果如下:
我們?cè)侔l(fā)揮一下想象, 如果是閉合曲線(xiàn), 是不是也能用同樣的方法實(shí)現(xiàn)呢?
我們只需要將background換成border, 調(diào)整border-radius參數(shù)即可. 接下來(lái)給大家看一下我用css畫(huà)的一個(gè)圖形, 各位可以參考學(xué)習(xí)一下:
當(dāng)然使用相同的原理我們可以實(shí)現(xiàn)更多有意思的圖案, 筆者這里就不一一舉例了.回歸正題, 我們來(lái)看看水波動(dòng)畫(huà)的實(shí)現(xiàn)原理. 首先不規(guī)則動(dòng)畫(huà)我們實(shí)現(xiàn)了, 剩下的工作就是如何實(shí)現(xiàn)波浪和波浪動(dòng)畫(huà), 參考上面不規(guī)則圖形的實(shí)現(xiàn)方案, 波浪線(xiàn)的制作可以采用類(lèi)似裁切來(lái)實(shí)現(xiàn), 如下:
由上圖可以看出, 我們使用css的border-radius做一個(gè)矩形和一個(gè)圓角矩形, 使用transform來(lái)設(shè)置偏移和旋轉(zhuǎn), 就可以實(shí)現(xiàn)底部裁切后的曲面. 最后我們使用animation動(dòng)畫(huà)讓其運(yùn)動(dòng)來(lái)看看效果:
我們只需要優(yōu)化上面的動(dòng)畫(huà), 讓背景更柔和, 比如說(shuō)圓形, 容器溢出隱藏, 這樣就可以實(shí)現(xiàn)H5-Dooring編輯器 中的水波動(dòng)畫(huà)了, css源碼如下:
.dragPay {
position: absolute;
z-index: 99999;
left: 414px;
top: 156px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #20c961;
background: #ffffff;
overflow: hidden;
padding: 5px;
box-sizing: border-box;
}
.dragPay .wave {
position: relative;
left: -8px;
width: 60px;
height: 60px;
background-image: linear-gradient(-180deg, #8dec8a 13%, #70cf23 91%);
border-radius: 50%;
line-height: 60px;
text-align: center;
font-size: 32px;
cursor: pointer;
}
.dragPay .waveMask {
position: absolute;
width: 120px;
height: 120px;
top: 0;
left: 50%;
border-radius: 40%;
background-color: rgba(255, 255, 255, 0.9);
transform: translate(-50%, -82%) rotate(0);
animation: toRotate 10s linear -5s infinite;
z-index: 20;
pointer-events: none;
}
@keyframes toRotate {
50% {
transform: translate(-50%, -70%) rotate(180deg);
}
100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}html結(jié)構(gòu)如下:
?
當(dāng)然我們可以使用偽元素來(lái)優(yōu)化dom結(jié)構(gòu). 大家可以親自感受一下。
當(dāng)前題目：前端: 輕松教你使用純css實(shí)現(xiàn)水波動(dòng)畫(huà)
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/dhsjcgj.html
