使用CSS實(shí)現(xiàn)逼真的水波紋點(diǎn)擊效果
我要評(píng)論這篇文章特別介紹如何使用CSS來(lái)完成水波紋的效果。
div的層層疊疊
雖然webkit具有遮罩的能力（webkit mask），不過(guò)webkit雖然強(qiáng)大，但在跨瀏覽器上總是它的罩門，況且在性能上也是往往會(huì)造成困擾（這也是為什么chrome要這么吃資源了），因此撇開(kāi)webkit不談，我們?cè)撚檬裁捶椒?，才可以做出水波紋的效果呢？答案就是用“疊”的方式，這個(gè)水波紋效果的原理其實(shí)就是用六個(gè)div疊在一起，接著最重要的就是將背景設(shè)為固定：background-attachment:fixed；，然后讓背景的尺寸有大有小，就可以完成了，只要把六個(gè)div疊在一起，搭配CSS的animation，就可以讓六個(gè)div依序出現(xiàn)。
HTML:
<div class="wave wave5"></div> <div class="wave wave4"></div> <div class="wave wave3"></div> <div class="wave wave2"></div> <div class="wave wave1"></div> <div class="wave wave0"></div>
CSS:
.wave{
position:absolute;
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
border-radius:300px;
}
.wave0{
background:#f00;
z-index:2;
background-size:auto 106%;
animation:w 1s forwards;
}
.wave1{
background:#d00;
z-index:3;
animation:w 1s .2s forwards;
}
.wave2{
background:#b00;
z-index:4;
animation:w 1s .4s forwards;
}
.wave3{
background:#900;
z-index:5;
animation:w 1s .5s forwards;
}
.wave4{
background:#700;
z-index:6;
animation:w 1s .8s forwards;
}
.wave5{
background:#500;
z-index:7;
animation:w 1s 1s forwards;
}
@keyframes w{
0%{
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
}
100%{
top:calc((100% - 300px)/2);
left:calc((100% - 300px)/2);
width:300px;
height:300px;
}
}
制作水波
上面有幾個(gè)地方要稍微注意一下，第一個(gè)是因?yàn)槲恢枚际褂昧私^對(duì)位置（absolute），因此我們要將所有的div定位在圓心一定有難度，這時(shí)候就必須使用CSS3的好用工具：calc，calc可以自動(dòng)計(jì)算位置，借由這個(gè)方式，我們直接可以讓CSS替我們計(jì)算出圓心，相當(dāng)?shù)姆奖?。（注意！calc的+、-號(hào)前后必須有空格，不然會(huì)出錯(cuò)），然后就是每個(gè)animation要逐一加上延遲時(shí)間，就可以逐一地冒出來(lái)，如果我們?cè)侔寻霃皆O(shè)大一點(diǎn)，就會(huì)變成圓形或是橢圓形！
了解了水波紋的原理之后，再來(lái)我們只要把上面的顏色換成背景圖，就可以順利的產(chǎn)生水波紋了。
HTML:
<div class="wave wave5"></div> <div class="wave wave4"></div> <div class="wave wave3"></div> <div class="wave wave2"></div> <div class="wave wave1"></div> <div class="wave wave0"></div>
CSS:
.wave{
position:absolute;
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
border-radius:300px;
background:url(圖片路徑);
background-attachment:fixed;
background-position:center center;
}
.wave0{
z-index:2;
background-size:auto 106%;
animation:w 1s forwards;
}
.wave1{
z-index:3;
background-size:auto 102%;
animation:w 1s .2s forwards;
}
.wave2{
z-index:4;
background-size:auto 104%;
animation:w 1s .4s forwards;
}
.wave3{
z-index:5;
background-size:auto 101%;
animation:w 1s .5s forwards;
}
.wave4{
z-index:6;
background-size:auto 102%;
animation:w 1s .8s forwards;
}
.wave5{
z-index:7;
background-size:auto 100%;
animation:w 1s 1s forwards;
}
@keyframes w{
0%{
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
}
100%{
top:calc((100% - 300px)/2);
left:calc((100% - 300px)/2);
width:300px;
height:300px;
}
}
逼真的水波
比較需要注意的地方，就是背景的位置千萬(wàn)要設(shè)為固定（background-attachment:fixed；），然后統(tǒng)一將背景居中，如此一來(lái)，背景的位置相同，但背景的大小不同，就會(huì)讓欺騙眼睛，讓眼睛認(rèn)為看到了水波，不過(guò)里頭也用了一個(gè)小技巧讓水波看起來(lái)更逼真，就是讓每一個(gè)背景大小都不同，換句話說(shuō)就是讓水波的震幅越來(lái)越小，讓背景大小從106 > 102 > 104 > 101 > 102 > 100，如此一來(lái)就會(huì)讓水波更逼真！
以上就是單純利用CSS制作水波紋的原理，當(dāng)然最后就是要寫一段JS讓水波可以在鼠標(biāo)點(diǎn)擊的剎那產(chǎn)生，而且下一個(gè)水波必須覆蓋上一個(gè)水波，然后水波產(chǎn)生后會(huì)自動(dòng)消失，避免過(guò)多的div造成畫面延遲。
jQuery:
var mx, my, timer;
var z = 2;
$(document).on('click', function (e) {
mx = e.pageX;
my = e.pageY;
z = z + 1;
_wave(mx, my, z);
});
function _wave(i, j, k) {
$('.ui-content').prepend(
'<div class="wave-position water' + k + '" style="z-index:' + k + ';top:' + (j - 150) + 'px;left:' + (i - 150) + 'px;">' +
'<div class="wave-body">' +
'<div class="wave wave5"></div>' +
'<div class="wave wave4"></div>' +
'<div class="wave wave3"></div>' +
'<div class="wave wave2"></div>' +
'<div class="wave wave1"></div>' +
'<div class="wave wave0"></div>' +
'</div>' +
'</div>'
);
setTimeout(function () {
$('.water' + k).remove();
}, 3000);
}
總結(jié)
以上所述是小編給大家介紹的使用CSS實(shí)現(xiàn)逼真的水波紋點(diǎn)擊效果,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
css3點(diǎn)擊按鈕水波紋氣泡動(dòng)畫特效源碼
css3點(diǎn)擊按鈕水波紋氣泡動(dòng)畫特效源碼是一款紅色按鈕，當(dāng)鼠標(biāo)點(diǎn)擊按鈕四周發(fā)射水波紋氣泡動(dòng)畫效果，效果非常逼真。本段代碼可以在各個(gè)網(wǎng)頁(yè)使用，有需要的朋友可以直接下載使2018-01-23
