像太阳的动画效果
<style>
.fa {
width: 30px;
height: 30px;
background-color: orange;
position: relative;
border-radius: 100px;
margin: 100px auto;
}
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 1px orange solid;
width:30px;
height: 30px;
border-radius: 100px;
animation: go .8s linear infinite;
}
@keyframes go {
0% {width:30px;
height: 30px;}
20% {width:35px;
height: 35px;
opacity: .5;}
40% {width:40px;
opacity: .4;
height: 40px;}
60% {width:45px;
opacity: .3;
height: 45px;}
80% {width:48px;
opacity: .2;
height: 48px;}
100% {width:50px;
opacity: .1;
height: 50px;}}
</style>
</head>
<body>
<div class="fa">
<div class="box"></div> </div> </body>
</body>
