css3波紋效果
阿新 • • 發佈：2018-12-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>波紋效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.contain-box{
width: 300px;
height: 240px;
margin: 50px auto;
position: relative;
/*background: #009ad7;*/
overflow: hidden;
}
.contain-box .wave{
position: absolute;
top: 0;
left: 50%;
z-index: 0;
margin-top: -290px;
margin-left: -230px;
height: 500px;
width: 500px;
background: #009ad7;
background:-webkit-linear-gradient(top,#009ad7,#28e7eb);
background:-moz-linear-gradient(top,#009ad7,#28e7eb);
border-radius: 44%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 48%;
animation: waves 12s infinite linear;
opacity: .8;
}
.contain-box .wave.two{
opacity: .4;
animation: waves 6s infinite linear;
}
.contain-box .wave.three{
/*margin-top: -450px;
margin-left: -450px;*/
background-color: yellow;
opacity: .1;
animation: waves 15s infinite linear;
}
@keyframes waves{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="contain-box">
<div class="one wave"></div>
<div class="two wave"></div>
<div class="three wave"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>波紋效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.contain-box{
width: 300px;
height: 240px;
margin: 50px auto;
position: relative;
/*background: #009ad7;*/
overflow: hidden;
}
.contain-box .wave{
position: absolute;
top: 0;
left: 50%;
z-index: 0;
margin-top: -290px;
margin-left: -230px;
height: 500px;
width: 500px;
background: #009ad7;
background:-webkit-linear-gradient(top,#009ad7,#28e7eb);
background:-moz-linear-gradient(top,#009ad7,#28e7eb);
border-radius: 44%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 48%;
animation: waves 12s infinite linear;
opacity: .8;
}
.contain-box .wave.two{
opacity: .4;
animation: waves 6s infinite linear;
}
.contain-box .wave.three{
/*margin-top: -450px;
margin-left: -450px;*/
background-color: yellow;
opacity: .1;
animation: waves 15s infinite linear;
}
@keyframes waves{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="contain-box">
<div class="one wave"></div>
<div class="two wave"></div>
<div class="three wave"></div>
</div>
</body>
</html>