[分享]css做从小到大旋转的动画

CSS是前端开发中不可或缺的一部分，而动画是CSS最引人注目的特性之一。今天我们来学习如何使用CSS来实现从小到大旋转的动画效果。.box { width: 100px; height: 100px;...

CSS是前端开发中不可或缺的一部分，而动画是CSS最引人注目的特性之一。今天我们来学习如何使用CSS来实现从小到大旋转的动画效果。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
    animation: rotate 1s ease-out infinite;
}

@keyframes rotate {
    0% {
        transform:  scale(0.2) rotate(0deg);
    }
    100% {
        transform:  scale(1) rotate(360deg);
    }
} 

首先，我们需要定义一个class为box的div元素，宽度和高度都为100px，背景颜色为红色，边框为圆形。然后，我们使用动画关键字animation来定义旋转动画。其中，rotate是动画名称，1s是动画持续时间，ease-out是动画缓动函数，infinite表示动画无限循环。

接着，我们使用@keyframes关键词来定义动画。该关键词后面跟着动画名称，即rotate。在括号中，我们可以定义动画的关键帧。这里，我们定义了两个关键帧，0%和100%。在0%时，将小圆球缩小到原来的20%，同时沿着x轴旋转0度，使其成为一个扁平的圆形。在100%时，将小圆球放大到原来的100%，同时沿着x轴旋转360度，使其回到原始状态，并形成旋转效果。

当我们将上述CSS代码复制到HTML文件中并运行后，你将看到一个小球在不断地从小到大旋转。