CSS动画效果

实现思路或过程：

1. 指定 .tracker 元素，表示发光线条和光点的整个范围及效果。定位为relative。

2. .tracker 元素添加两个伪元素，一个表示发光的线条；一个表示发光的点。两个各自有对应的动画，互不干扰，但有配合

3. 线条伪元素的动画，宽度从0先暂停15%时间，然后逐渐向右变宽到占满.tracker，等待15%时间，再宽度从左侧逐渐缩小到0，暂停15%段时间，然后重新开始

4. 发光点的动画，在最开始15%的时间内，从0缩放到最大，再发光到最大，发光后等待一段时间；然后，跟随逐渐向右变宽到线条移动到最右侧，并等待线条移动完成；在线条缩小到0后的15%时间内，先发光保持不变一段时间，然后发光逐渐消失，再光点缩小到0。

5. 可适当调整动画时间，开始结束的时间比例等。

光线线条动画通过缩放x轴(0~1)实现；光点动画通过绝对定位 left 距左侧位置、box-shadow阴影发光变化实现。

代码

• HTML 部分

动画的主要实现是.tracker元素。由其完成 光线流动 和 发光点 的整体动画。

然后就可以将其放在任何其他容器类的元素内使用，比如下面的.loader元素。

<div class="loader">
    <div class="tracker"></div>
</div>

• CSS 动画部分

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #222;
        }
        .loader{
            position: relative;
            width: 500px;
            height: 5px;
            background-color: #000;
        }
        .tracker{
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #000;
        }
        .tracker::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #0bec70;
            animation: animate 6s linear infinite;
        }
        @keyframes animate {
            0%,15%{
                transform: scaleX(0);
                transform-origin: left;
            }
            45%{
                transform: scaleX(1);
                transform-origin: left;
            }
            60%{
                transform: scale(1);
                transform-origin: right;
            }
            85%,100%{
                transform: scaleX(0);
                transform-origin: right;
            }
        }
        /* 第一次刷新时，看不到 小圆点从小变大再发光 的过程 */
        .tracker::after{
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #0bec7c;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%) scale(0);
            left: 0;
            animation: animateDot 6s linear infinite;
        }
        @keyframes animateDot {
            0%{
                transform: translateY(-50%) scale(0);
                left: 0;
            }
            5%{
                transform: translateY(-50) scale(1);
                left: 0;
            }
            10%,15%{
                transform: translateY(-50%) scale(1);
                box-shadow: 0 0 0 4px #0bec7c22,
                0 0 0 10px #0bec7c22,
                0 0 20px #0bec7c,
                0 0 40px 5px #0bec7c,
                0 0 60px 10px #0bec7c;
                left: 0;
            }
            45%{
                /* transform: translateY(-50%) scale(1); */
                left: 100%;
            }
            60%{
                /* transform: translateY(-50%) scale(1); */
                box-shadow: 0 0 0 4px #0bec7c22,
                0 0 0 10px #0bec7c22,
                0 0 20px #0bec7c,
                0 0 40px 5px #0bec7c,
                0 0 60px 10px #0bec7c;
                left: 100%;
            }
            90%{
                transform: translateY(-50%) scale(1);
                box-shadow: 0 0 0 4px #0bec7c22,
                0 0 0 10px #0bec7c22,
                0 0 20px #0bec7c,
                0 0 40px 5px #0bec7c,
                0 0 60px 10px #0bec7c;
                left: 100%;
            }
            95%{
                transform: translateY(-50%) scale(1);
                box-shadow:none;
            }
            100%{
                transform: translateY(-50%) scale(0);                
                left: 100%;
            }
        }

一个小问题

不知为何，第一次刷新时，看不到 小圆点从小变大再发光 的过程。从动画效果上，是有这个过程的。

参考

使用HTML和CSS创建CSS发光线条动画效果