效果：
旋转放大动画
HTML
<div class="ani">
<div class="ani2">
<div class="dot"></div>
</div>
</div>
CSS
.ani {
width: 10rem;
animation: boost 2s ease-in-out 1 normal;
}
.ani2 {
height: 10rem;
margin-left: auto;
margin-right: auto;
animation: spin 2s linear 1 normal;
background-color: #f00;
border-radius: 50%;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
}
.dot{
width: 3rem;
height: 3rem;
background-color: #0f0;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes boost {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
