資訊專欄INFORMATION COLUMN
摘要：后期準(zhǔn)備使用面向?qū)ο蟮膶?xiě)法完成，將水波的大小顏色范圍過(guò)渡等效果進(jìn)行開(kāi)發(fā)者自定義，或許會(huì)加入更多的效果
css之水波效果
沒(méi)事實(shí)現(xiàn)了一個(gè)小效果，貼上來(lái)分享分享
先看看效果
上代碼
:root{
background: #ffffd;
}
body{
position: relative;
}
ripper{
width: 50px;
height: 50px;
background: rgba(0,0,0,.1);
border-radius: 50%;
position: absolute;
animation: move .3s;
}
@keyframes move{
0%{
transform: scale(0);
}
49%{
transform: scale(1);
}
51%{
transform: scale(1);
}
100%{
transform: scale(0);
}
}
window.addEventListener("click",function(e){
if(closeTimer){
clearTimeout(closeTimer);
}
var e = event||e;
var x = e.clientX,y = e.clientY;
var Top = y-25-8,Left = x-25-8;
var ripper = document.createElement("ripper");
ripper.style.top = Top+"px";
ripper.style.left = Left+"px";
document.getElementsByTagName("body")[0].appendChild(ripper);
var closeTimer = setTimeout(function(){
document.getElementsByTagName("body")[0].removeChild(ripper);
},250)
})
備注：木有html
踩坑點(diǎn)
var closeTimer必須在點(diǎn)擊事件內(nèi)部生成，在作用域外面會(huì)造成定時(shí)器關(guān)閉混亂，清除不成功的問(wèn)題
記憶混淆的BOM對(duì)象:網(wǎng)頁(yè)可見(jiàn)區(qū)域: document.body.clientWidth/clientHeight
談?wù)?br>這個(gè)只是簡(jiǎn)單的想法，基礎(chǔ)版本，樣式和邏輯分離，只是簡(jiǎn)單實(shí)現(xiàn)了效果。
后期準(zhǔn)備使用面向?qū)ο蟮膶?xiě)法完成，將水波的大小、顏色、范圍、過(guò)渡等效果進(jìn)行開(kāi)發(fā)者自定義，或許會(huì)加入更多的效果:)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113182.html
這篇文章特別介紹如何使用CSS來(lái)完成水波紋的效果。 div的層層疊疊 雖然webkit具有遮罩的能力（webkit mask），不過(guò)webkit雖然強(qiáng)大，但在跨瀏覽器上總是它的罩門(mén)，況且在性能上也是往往會(huì)造成困擾（這也是為什么chrome要這么吃資源了），因此撇開(kāi)webkit不談，我們?cè)撚檬裁捶椒?，才可以做出水波紋的效果呢？答案就是用疊的方式，這個(gè)水波紋效果的原理其實(shí)就是用六個(gè)div疊在一起，接著...
這篇文章特別介紹如何使用CSS來(lái)完成水波紋的效果。 div的層層疊疊 雖然webkit具有遮罩的能力（webkit mask），不過(guò)webkit雖然強(qiáng)大，但在跨瀏覽器上總是它的罩門(mén)，況且在性能上也是往往會(huì)造成困擾（這也是為什么chrome要這么吃資源了），因此撇開(kāi)webkit不談，我們?cè)撚檬裁捶椒?，才可以做出水波紋的效果呢？答案就是用疊的方式，這個(gè)水波紋效果的原理其實(shí)就是用六個(gè)div疊在一起，接著...
摘要：先上效果圖水波動(dòng)畫(huà)邊框動(dòng)畫(huà)水波動(dòng)畫(huà)實(shí)現(xiàn)代碼水波動(dòng)畫(huà)邊框動(dòng)畫(huà)實(shí)現(xiàn)代碼邊框動(dòng)畫(huà)先上效果圖： 水波動(dòng)畫(huà)： 邊框動(dòng)畫(huà)： 1.水波動(dòng)畫(huà) 實(shí)現(xiàn)代碼 1 DOCTYPE html> 2 3 4 5 水波動(dòng)畫(huà) 6 7 .water{ 8 width: 50px; 9 h...
摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見(jiàn)的，而遮罩層是不顯示的。利用能做出一些不錯(cuò)的效果，比如。想到用這個(gè)屬性正合適，于是要來(lái)了心型圖片，拿到設(shè)計(jì)師導(dǎo)出的文件，用壓縮下得到一個(gè)。 遮罩層，如果學(xué)過(guò)Flash的同學(xué)應(yīng)該都聽(tīng)過(guò)，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見(jiàn)的，而遮罩層是不顯示的。類似于現(xiàn)實(shí)世界中一張A4卡紙剪了個(gè)洞，我...
閱讀 3049·2021-11-24 09:39
閱讀 3691·2021-11-22 13:54
閱讀 3474·2021-11-16 11:45
閱讀 2546·2021-09-09 09:33
閱讀 3271·2019-08-30 15:55
閱讀 1352·2019-08-29 15:40
閱讀 989·2019-08-29 15:19
閱讀 3481·2019-08-29 15:14
