css特效源码

/* 示例代码：简单的 CSS 动画特效 */

/* 定义一个类，用于创建一个旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 应用动画到元素 */
.rotating-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* 解释说明：
1. @keyframes rotate：定义了一个名为 'rotate' 的动画，从 0 度旋转到 360 度。
2. .rotating-box：选择器，应用于具有该类的 HTML 元素。
3. animation-name: rotate：指定要应用的动画名称为 'rotate'。
4. animation-duration: 2s：设置动画持续时间为 2 秒。
5. animation-iteration-count: infinite：使动画无限循环。
6. animation-timing-function: linear：设置动画的速度曲线为线性，即匀速。
*/