使用css写一个套娃的动画

创建一个“套娃”动画，我们可以使用 CSS 的 @keyframes 动画和 transform 属性。以下是一个简单的示例，其中包含了三个嵌套的 div，每个 div 都会在动画中缩小并旋转：

HTML:

<div class="doll">
    <div class="doll">
        <div class="doll"></div>
    </div>
</div>

CSS:

.doll {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    border-radius: 50%;
    position: relative;
    animation: dollAnimation 2s infinite;
}

.doll .doll {
    width: 80%;
    height: 80%;
    border-color: red;
    animation: dollAnimation 1s infinite;
    position: absolute;
    top: 10%;
    left: 10%;
}

.doll .doll .doll {
    border-color: blue;
    animation: dollAnimation 0.5s infinite;
}

@keyframes dollAnimation {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

在这个示例中，最外层的 div 有一个黑色的边框，中间的 div 有一个红色的边框，而最内层的 div 有一个蓝色的边框。每个 div 都会进行一个旋转和缩放的动画，但动画的时长和速度会逐层减半，从而创建出一个有趣的“套娃”效果。你可以根据需要调整这些值来达到你想要的效果。