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