資訊專欄INFORMATION COLUMN
摘要：后期準備使用面向?qū)ο蟮膶懛ㄍ瓿?，將水波的大小顏色范圍過渡等效果進行開發(fā)者自定義，或許會加入更多的效果
css之水波效果
沒事實現(xiàn)了一個小效果，貼上來分享分享
先看看效果
上代碼
: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
踩坑點
var closeTimer必須在點擊事件內(nèi)部生成，在作用域外面會造成定時器關閉混亂，清除不成功的問題
記憶混淆的BOM對象:網(wǎng)頁可見區(qū)域: document.body.clientWidth/clientHeight
談談
這個只是簡單的想法，基礎版本，樣式和邏輯分離，只是簡單實現(xiàn)了效果。
后期準備使用面向?qū)ο蟮膶懛ㄍ瓿?，將水波的大小、顏色、范圍、過渡等效果進行開發(fā)者自定義，或許會加入更多的效果:)
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113182.html
這篇文章特別介紹如何使用CSS來完成水波紋的效果。 div的層層疊疊 雖然webkit具有遮罩的能力（webkit mask），不過webkit雖然強大，但在跨瀏覽器上總是它的罩門，況且在性能上也是往往會造成困擾（這也是為什么chrome要這么吃資源了），因此撇開webkit不談，我們該用什么方法，才可以做出水波紋的效果呢？答案就是用疊的方式，這個水波紋效果的原理其實就是用六個div疊在一起，接著...
這篇文章特別介紹如何使用CSS來完成水波紋的效果。 div的層層疊疊 雖然webkit具有遮罩的能力（webkit mask），不過webkit雖然強大，但在跨瀏覽器上總是它的罩門，況且在性能上也是往往會造成困擾（這也是為什么chrome要這么吃資源了），因此撇開webkit不談，我們該用什么方法，才可以做出水波紋的效果呢？答案就是用疊的方式，這個水波紋效果的原理其實就是用六個div疊在一起，接著...
摘要：先上效果圖水波動畫邊框動畫水波動畫實現(xiàn)代碼水波動畫邊框動畫實現(xiàn)代碼邊框動畫先上效果圖： 水波動畫： 邊框動畫： 1.水波動畫 實現(xiàn)代碼 1 DOCTYPE html> 2 3 4 5 水波動畫 6 7 .water{ 8 width: 50px; 9 h...
摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯的效果，比如。想到用這個屬性正合適，于是要來了心型圖片，拿到設計師導出的文件，用壓縮下得到一個。 遮罩層，如果學過Flash的同學應該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現(xiàn)實世界中一張A4卡紙剪了個洞，我...
閱讀 2921·2021-11-24 09:39
閱讀 3599·2021-11-22 13:54
閱讀 3408·2021-11-16 11:45
閱讀 2432·2021-09-09 09:33
閱讀 3193·2019-08-30 15:55
閱讀 1289·2019-08-29 15:40
閱讀 919·2019-08-29 15:19
閱讀 3396·2019-08-29 15:14
