如何在单个HTML页面中实现两个不同旋转角度的CSS加载器

看起来你是因为两个加载器共用了相同的动画规则才导致效果重复的，别担心，咱们给每个加载器分配独立的类和动画就能搞定。下面是修改后的完整代码，直接保存为Double Loader.html就能看到预期效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Loader</title>
    <style>
        /* 第一个加载器：90度循环旋转 */
        .loader-90 {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin-90 1s linear infinite;
            margin: 20px;
        }

        /* 第二个加载器：360度循环旋转 */
        .loader-360 {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #e74c3c;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin-360 1s linear infinite;
            margin: 20px;
        }

        /* 90度旋转的关键帧动画 */
        @keyframes spin-90 {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(90deg); }
        }

        /* 360度旋转的关键帧动画 */
        @keyframes spin-360 {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="loader-90"></div>
    <div class="loader-360"></div>
</body>
</html>

关键修改说明： #

• 给两个加载器分别设置了独立的类名.loader-90和.loader-360，避免样式冲突
• 定义了两个完全独立的关键帧动画spin-90和spin-360，分别指定90度和360度的旋转终点
• 特意给第二个加载器用了红色的顶部边框，方便你直观区分两个加载器，颜色可以随意调整
• 动画时长都设为1秒，线性匀速旋转且无限循环，要是想调整速度，把1s改成2s这类数值就行

如果你的需求是第一个加载器只旋转90度就停止，而不是循环往复，只需要把.loader-90里的animation属性去掉infinite即可，变成：

animation: spin-90 1s linear;

内容的提问来源于stack exchange，提问作者Oimar Daif