-
效果图：
-
animation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同心圆动画</title>
<style>
.one{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 200px;
border: 1px solid #ccc;
border-radius: 100%;
animation-name:c1;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.onechild{
height: 100px;
width:100px;
border: 1px solid #ccc;
border-radius: 100%;
animation-name:c2;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes c1{
0%{
transform: scale(0.8);
}
50%{
transform: scale(1);
}
100%{
transform: scale(0.8);
}
}
@keyframes c2{
0%{
transform: scale(1);
}
50%{
transform: scale(0.5);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body style="background-color: black">
<div class="one">
<div class="onechild"></div>
</div>
</body>
</html>
- 写同心圆的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同心圆动画</title>
<style>
/*第一种*/
.one{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 200px;
border: 1px solid #ccc;
border-radius: 100%;
}
.onechild{
height: 100px;
width:100px;
border: 1px solid #ccc;
border-radius: 100%;
}
/*第二种*/
.two{
position: relative;
height: 200px;
width:200px;
border-radius: 100%;
border: 1px solid #ccc;
}
.twochild{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width:100px;
border-radius: 100%;
border: 1px solid #ccc;
}
/*第三种*/
.three{
position: relative;
height: 200px;
width:200px;
border-radius: 100%;
border: 1px solid #ccc;
}
.threechild{
position: absolute;
top: 50%;
bottom: 50%;
left: -50%;
right: -50%;
height: 100px;
width:100px;
border-radius: 100%;
border: 1px solid #ccc;
}
</style>
</head>
<body style="background-color: black">
<div class="one">
<div class="onechild"></div>
</div>
<div class="two">
<div class="twochild"></div>
</div>
<div class="three">
<div class="threechild"></div>
</div>
</body>
</html>