前言
模拟水波纹的动画效果
正文
提示:以下是本篇文章正文内容,下面案例可供参考
片段1的效果图
代码片段1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container .box {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.container .box span {
position: absolute;
box-sizing: border-box;
/* border: 2px solid #fff; */
border-radius: 50%;
animation: animate 3s linear infinite;
animation-delay: calc(0.5s * var(--i))
}
.box>span:nth-of-type(1){
background: rgb(248, 194, 194);
}
.box>span:nth-of-type(2){
background: rgb(245, 129, 129);
}
.box>span:nth-of-type(3){
background: rgb(243, 90, 90);
}
.box>span:nth-of-type(4){
background: red;
}
@keyframes animate {
0% {
width: 0;
height: 0;
}
20% {
opacity: 1;
}
100% {
width: 400px;
height: 400px;
opacity: 0;
}
}
/* */
.bg{width: 100%;height:500px;position: relative;}
.bg .content{position: absolute;left: 300px;top: 60px;}
.bg .content div{width: 100px;height: 100px;border-radius:50%;position: relative;background: red;}
.bg .content p{
position: absolute;width: 100px;height: 100px;border-radius:50%;
animation: keyAN 2s infinite;
}
.bg .content span{position: absolute;display:block;width: 100px;height: 100px;border-radius:50%;
animation: keyAN 4s infinite;
animation-delay: 0.2s;}
@keyframes keyAN {
20% {
transform: scale(1.2);
/* 可以用透明度,也可以设置ba */
/* opacity: 0.8; */
background: rgb(243, 39, 39);
z-index: -1;
}
40% {
transform: scale(1.4);
opacity: 0.6;
z-index: -2;
}
60% {
transform: scale(1.6);
background: rgb(247, 86, 86);
opacity: 0.5;
z-index: -3;
}
80% {
transform: scale(1.8);
opacity: 0.4;
z-index: -4;
}
100% {
transform: scale(1.9);
opacity: 0.2;
z-index: -5;
}
100% {
transform: scale(2);
opacity: 0.1;
z-index: -6;
}
}
</style>
</head>
<body>
<div class="bg">
<div class="content">
<div class="one">
<p></p>
<span></span>
</div>
</div>
</div>
<div class="container">
</div>
</body>
</html>
片段2的效果图
代码片段2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container .box {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.container .box span {
position: absolute;
box-sizing: border-box;
background: red;
border-radius: 50%;
animation-delay: calc(0.5s * var(--i));
}
.container .box span:nth-of-type(1) {
animation: keyAN 2s linear infinite;
background: rgb(236, 6, 6);
}
.container .box span:nth-of-type(2) {
border: 2px solid rgba(252, 117, 117, 0.788);
animation: keyANA 4s linear infinite;
}
.container .box span:nth-of-type(3) {
border: 2px solid rgba(240, 126, 111, 0.336);
animation: keyANB 6s linear infinite;
}
@keyframes keyAN {
0% {
width: 10px;
height: 10px;
}
25% {
opacity: 0.3;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.3;
}
100% {
width: 15px;
height: 15px;
opacity: 0;
}
}
@keyframes keyANA {
0% {
width: 13px;
height: 13px;
}
25% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
75% {
opacity: 0.4;
}
100% {
width: 20px;
height: 20px;
opacity: 0;
}
}
@keyframes keyANB {
0% {
width: 15px;
height: 15px;
}
25% {
opacity: 0.3;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.3;
}
100% {
width: 23px;
height: 23px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:4"></span>
</div>
</div>
</body>
</html>
css3动画才刚学习,如有不正确,请指正
Ending…