-
效果图:
-
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