Chicken Soup of the Day: Every moment you want to learn is the future you asking yourself for help
Requirements, to realize the water ripple animation effect, require a dot in the center, and then there are 3 circles, which shrink inward one by one.
To be honest, I first thought of setting different widths and heights for the 3 circles, and then set the animation 0-100% to shrink the width and height at a time!
However, I thought about it again, can I also use the padding setting, that is, set a padding for each circle, and gradually reduce the padding, it seems that the same effect can be achieved. It is indeed possible, but no matter which method is used, if you want to make the animation smooth , you need to set a transparency change of 0-1 for the outermost circle, otherwise there will always be a feeling of stuttering, you can try it yourself The difference between adding and not adding
1. Use padding to achieve
Animation implementation: the padding of the large circle shrinks to the initial padding of the middle circle (at the same time the opacity is from 0-1), the padding of the middle circle shrinks to the initial padding of the small circle, and the padding of the small circle shrinks to 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./dist/bundle.js"></script>
<style>
.flex-c {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wrapper {
border: 1px solid red;
width: 800px;
height: 800px;
}
.center {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}
.circle {
border: 1px solid;
border-radius: 50%;
}
.circle-1 {
padding: 200px;
/*最外圈要加一个透明度的变化*/
border-color: rgba(0, 0, 0, 0);
animation: animate1 2.5s linear infinite;
}
.circle-2 {
padding: 100px;
animation: animate2 2.5s linear infinite;
}
.circle-3 {
padding: 50px;
animation: animate3 2.5s linear infinite;
}
@keyframes animate1 {
0% {
padding: 200px;
/*最外圈要加一个透明度的变化*/
border-color: rgba(0, 0, 0, 0);
}
100% {
padding: 100px;
/*最外圈要加一个透明度的变化*/
border-color: rgba(0, 0, 0, 1);
}
}
@keyframes animate2 {
0% {
padding: 100px;
}
100% {
padding: 50px;
}
}
@keyframes animate3 {
0% {
padding: 50px;
}
100% {
padding: 0px;
}
}
</style>
</head>
<body>
<div class="wrapper flex-c">
<div class="flex-c circle circle-1">
<div class="flex-c circle circle-2">
<div class="flex-c circle circle-3">
<div class="center flex-c">中心</div>
</div>
</div>
</div>
</div>
</body>
</html>
2. Use width and height to achieve
Animation implementation: the width and height of the large circle shrink to the initial size of the middle circle (while the opacity ranges from 0-100), the width and height of the middle circle shrink to the initial size of the small circle, and the small circle shrinks to the size of the center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./dist/bundle.js"></script>
<style>
.flex-c {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wrapper {
border: 1px solid rgba(0, 0, 0, 0.5);
width: 1500px;
height: 1500px;
background: #000;
}
.center {
width: 248px;
height: 248px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
opacity: 0.4;
color: #fff;
}
.circle {
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.circle-1 {
width: 1297px;
height: 1297px;
animation: animate1 2.5s linear infinite;
}
.circle-2 {
width: 833px;
height: 833px;
animation: animate2 2.5s linear infinite;
}
.circle-3 {
width: 503px;
height: 503px;
animation: animate3 2.5s linear infinite;
}
@keyframes animate1 {
0% {
width: 1297px;
height: 1297px;
/*最外圈要加一个透明度的变化*/
border-color: rgba(255, 255, 255, 0);
}
100% {
width: 833px;
height: 833px;
/*最外圈要加一个透明度的变化*/
border-color: rgba(255, 255, 255, 0.6);
}
}
@keyframes animate2 {
0% {
width: 833px;
height: 833px;
}
100% {
width: 503px;
height: 503px;
}
}
@keyframes animate3 {
0% {
width: 503px;
height: 503px;
}
100% {
width: 248px;
height: 248px;
}
}
</style>
</head>
<body>
<div class="wrapper flex-c">
<div class="flex-c circle circle-1">
<div class="flex-c circle circle-2">
<div class="flex-c circle circle-3">
<div class="center flex-c">中心</div>
</div>
</div>
</div>
</div>
</body>
</html>