HTML CSS加载动画 - 编程之家

如何解决HTML CSS加载动画

我正在根据以下链接上的视频观看在线教程： https://www.youtube.com/watch?v=ttWXapXj4cg

@charset "utf-8";
/* CSS Document */
*
{
    margin: 0;
    padding: 0;
    Box-sizing: border-Box;
}
section
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateBg 10s linear infinite;
}
@keyframes animateBg
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}
section .loader
{
    position: relative;
    width: 120px;
    height: 120px;
}
section .loader span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
}
section .loader span::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #00ff0a;
    Box-shadow: 0 0 10px #00ff0a,0 0 20px #00ff0a,0 0 40px #00ff0a,0 0 60px #00ff0a,0 0 80px #00ff0a,0 0 100px #00ff0a;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--1));
}
@keyframes animate
{
    0%
    {
        transform: scale(1);
    }
    80%,100%
    {
        transform: scale(0);
    }
}

<!doctype html>
<html>
<head>
<Meta charset="utf-8">
<title>CSS creative Loader Animation Effects</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <section>
        <div class="loader">
            <span style="--i:1"></span>
            <span style="--i:2"></span>
            <span style="--i:3"></span>
            <span style="--i:4"></span>
            <span style="--i:5"></span>
            <span style="--i:6"></span>
            <span style="--i:7"></span>
            <span style="--i:8"></span>
            <span style="--i:9"></span>
            <span style="--i:10"></span>
            <span style="--i:11"></span>
            <span style="--i:12"></span>
            <span style="--i:13"></span>
            <span style="--i:14"></span>
            <span style="--i:15"></span>
            <span style="--i:16"></span>
            <span style="--i:17"></span>
            <span style="--i:18"></span>
            <span style="--i:19"></span>
            <span style="--i:20"></span>
        </div>
    </section>
</body>
</html>

该代码应该显示一个加载动画，该动画显示了一组顺时针旋转的圆圈，就像在视频中一样，但事实并非如此。我想知道我做错了什么，对此我将不胜感激。请租赁，谢谢。

解决方法

容易，看起来您有错字。

section .loader span::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #00ff0a;
    box-shadow: 0 0 10px #00ff0a,0 0 20px #00ff0a,0 0 40px #00ff0a,0 0 60px #00ff0a,0 0 80px #00ff0a,0 0 100px #00ff0a;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--1));
}

在动画延迟中，您说calc（0.1s * var（-1））;但是应该是这样的：

section .loader span::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #00ff0a;
    box-shadow: 0 0 10px #00ff0a,0 0 100px #00ff0a;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
}

所以是var（-i）而不是var（-1）。

玩得开心;）