CSS3-使用transform+animation实现圆弧渐变旋转动画，详细教程+源代码

/* 定义动画 */
@keyframes spin-arc {
    0% {
        transform: rotateX(5deg) rotateY(-5deg) rotate(0deg) translateZ(200px);
    }
    100% {
        transform: rotateX(5deg) rotateY(-5deg) rotate(360deg) translateZ(200px);
    }
}
 
/* 应用动画的元素 */
.arc-animation {
    width: 100px;
    height: 50px;
    background: conic-gradient(#3498db, #2980b9);
    border-radius: 25px 25px 0 0; /* 圆弧形状 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center bottom; /* 动画中心点 */
    animation: spin-arc 5s linear infinite; /* 动画名称，持续时间，速率函数，循环次数 */
}

这段代码定义了一个名为.arc-animation的CSS类，它使用了transform和animation属性来创建一个无限循环的圆弧渐变旋转动画。通过conic-gradient我们创建了一个圆弧形的渐变背景，并且通过@keyframes定义了旋转的动画。这个类可以被用在任何需要创建旋转动画的HTML元素上。