css做360度旋转的动画

在web开发中，动画效果是一大亮点，能够吸引用户的视线，提高网站的交互性。而CSS3则提供了许多实用的动画属性，其中360度旋转是其中比较常用的一种。下面我们来学习一下如何使用CSS实现一个360度旋转的动画效果。

 /* 定义一个变量来保存旋转的角度 */
    :root {
        --rotate: 0deg;
    }

    /* 定义一个类来完成旋转动画 */
    .rotate {
        animation: rotate 2s linear infinite;
    }

    /* 定义旋转动画的细节 */
    @keyframes rotate {
        0% {
            transform: rotate(var(--rotate));
        }
        100% {
            transform: rotate(calc(var(--rotate) + 360deg));
        }
    } 

上面的代码定义了一个变量--rotate来保存当前旋转的角度，初始值为0度。同时，我们创建一个.rotate的类来完成旋转动画，并使用animation属性来设置动画名称、时间、速度和循环次数。

在定义动画的细节时，我们使用@keyframes来设置动画的起始和结束状态。在0%的状态下，transform属性使用刚刚设置的--rotate来实现旋转，而在100%的状态下，利用calc()函数进行计算，实现从当前角度开始再加上360度的旋转效果。

最后，我们只需要在需要旋转的元素上添加.rotate类即可实现360度旋转的动画效果。在实际应用中，我们还可以通过JavaScript来动态地改变变量--rotate的值，从而控制旋转的速度和方向。