1.水波纹特效
HTML
<div is="page" id="home" data-role="page"> <div is="content" role="main" class="ui-content"> <div is="dragable" class="bg"></div> </div> </div>
CSS
html,body,#home,.ui-content{
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
cursor:pointer;
}
.bg{
width:100%;
height:100%;
background-image:url(https://pics.codecolor.cn/water-wave/bg.jpg);
background-attachment:fixed;
background-position:center center;
background-size:auto 100%;
}
.wave-position{
position:absolute;
width:300px;
height:300px;
}
.wave-body{
position:relative;
width:100%;
height:100%;
}
.wave{
position:absolute;
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
border-radius:300px;
background:url(https://pics.codecolor.cn/water-wave/bg.jpg);
background-attachment:fixed;
background-position:center center;
}
.wave0{
z-index:2;
background-size:auto 106%;
-webkit-animation:w 1s;
-moz-animation:w 1s;
animation:w 1s;
}
.wave1{
z-index:3;
background-size:auto 102%;
-webkit-animation:w 1s .15s;
-moz-animation:w 1s .15s;
animation:w 1s .15s;
}
.wave2{
z-index:4;
background-size:auto 104%;
-webkit-animation:w 1s .3s;
-moz-animation:w 1s .3s;
animation:w 1s .3s;
}
.wave3{
z-index:5;
background-size:auto 101%;
-webkit-animation:w 1s .45s;
-moz-animation:w 1s .45s;
animation:w 1s .45s;
}
.wave4{
z-index:6;
background-size:auto 102%;
-webkit-animation:w 1s .6s;
-moz-animation:w 1s .6s;
animation:w 1s .6s;
}
.wave5{
z-index:7;
background-size:auto 100%;
-webkit-animation:w 1s .75s;
-moz-animation:w 1s .75s;
animation:w 1s .75s;
}
@-webkit-keyframes w{
0%{
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
opacity:1;
}
99%{
opacity:1;
}
100%{
top:calc((100% - 300px)/2);
left:calc((100% - 300px)/2);
width:300px;
height:300px;
opacity:0;
}
}
@-moz-keyframes w{
0%{
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
opacity:1;
}
99%{
opacity:1;
}
100%{
top:calc((100% - 300px)/2);
left:calc((100% - 300px)/2);
width:300px;
height:300px;
opacity:0;
}
}
@keyframes w{
0%{
top:calc((100% - 30px)/2);
left:calc((100% - 30px)/2);
width:30px;
height:30px;
opacity:1;
}
99%{
opacity:1;
}
100%{
top:calc((100% - 300px)/2);
left:calc((100% - 300px)/2);
width:300px;
height:300px;
opacity:0;
}
}
js
(function () {
$(document).on('pageshow', '#home', function () {
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);
}
});
})();