纯css实现旋转放大动画

效果：

旋转放大动画

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);
    }
}