這篇文章特別介紹如何使用CSS來完成水波紋的效果。
div的層層疊疊
雖然webkit具有遮罩的能力(webkit mask),不過webkit雖然強大,但在跨瀏覽器上總是它的罩門,況且在性能上也是往往會造成困擾(這也是為什麼chrome要這麼喫資源了),因此撇開webkit不談,我們該用什麼方法,纔可以做出水波紋的效果呢?答案就是用「疊」的方式,這個水波紋效果的原理其實就是用六個div疊在一起,接著最重要的就是將背景設為固定:background-attachment:fixed;,然後讓背景的尺寸有大有小,就可以完成了,只要把六個div疊在一起,搭配CSS的animation,就可以讓六個div依序出現。
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;
}
}