支付宝特效

来源：互联网发布：java自动化测试代码编辑：程序博客网时间：2024/05/14 18:43

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>支付宝特效</title>
<style type="text/css">
html,body{
/*父元素.*/
height: 100%;
}
body{
display: flex;
/*调整主轴以及侧轴的对其方式*/
justify-content: center;
align-items: center;
background: #1E577E;
overflow: hidden;
}
.main{
width: 128px;
height: 128px;
position: relative;
}
.main>div{
width: 128px;
height: 128px;
position: absolute;
left: 0;
top: 0;
}
.circle{
border: 1px solid #ccc;
/*相对当前盒子.*/
border-radius: 50%;
opacity: 0;
}

.circle.go{
animation-name:change;
/*//执行的时间*/
animation-duration:3s;
/*//速度*/
animation-timing-function:linear;
/*//次数*/
animation-iteration-count:infinite;
}
.center{
cursor:pointer;
}
@keyframes change{
0%{
transform:scale(1);
opacity:0.4;
}
100%{
transform:scale(4);
opacity: 0;
}
}

</style>
</head>
<body>
<div class="main">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="center">
<img src="images/1.png" alt="">
</div>
</div>
<audio src="张国荣 - 风继续吹.mp3"></audio>

<script type="text/javascript">
document.querySelector(".center").onclick=function(){
var circle = document.querySelectorAll(".circle");
for(var i = 0; i < circle.length; i++){
circle[i].style.animationDelay = i*0.6+"s";
circle[i].classList.add("go");
}
var audio = document.querySelector("audio");
audio.loop = "loop";
audio.play();
}

</script>
</body>

</html>

0 0