2024-04-17【动效demo】四周环绕跑马灯效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Glow Animation</title>
</head>

<body>


    <div class="MedicalInsurncss">
        <div class="border-animation">
            <div class="topagin-border"></div>
            <div class="bottom-border"></div>
            <div class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem modi provident aliquid, esse eum
                necessitatibus, adipisci odio rem delectus ab debitis. Laboriosam ut dolorum culpa, eaque alias
                accusamus iste dignissimos.
            </div>
            <div class="right-border"></div>
        </div>
    </div>

    <style lang="less" scoped>
        .border-animation {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: white;
            /* 背景色 */
            overflow: hidden;
            /* 确保伪元素不会溢出容器 */
        }

        .content {
            top: 3%;
            left: 2.5%;
            width: 400px;
            height: 300px;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            animation: scaleBgImg 0.5s linear 3s forwards;
            border: 2px solid #ffffff;
        }

        /* 顶部边框 */
        .border-animation::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3%;
            /* 边框宽度 */
            background: linear-gradient(90deg, transparent, #37F1FF);
            animation: moveTopBorder 8s linear infinite;
        }

        .right-border {
            /* 注意：这个类应该应用到一个独立的元素上，而不是.border-animation的伪元素上 */
            position: absolute;
            top: 0;
            right: 0;
            /* 放置在右侧 */
            width: 1.5%;
            /* 边框宽度 */
            height: 100%;
            background: linear-gradient(to bottom, transparent, #37F1FF);
            /* 垂直渐变 */
            animation: moveRightBorder 8s linear infinite;
            /* 应用动画 */
            overflow: hidden;
            /* 确保伪元素不会溢出容器 */
        }

        /* 底部边框（需要额外的类或伪元素，这里使用.bottom-border类作为示例） */
        .bottom-border {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3%;
            background: linear-gradient(90deg, #37F1FF, transparent);
            animation: moveBottomBorder 8s linear infinite;
            /* 注意：由于.bottom-border不是一个伪元素，你需要将其作为一个单独的HTML元素或额外的类添加到.border-animation中 */
        }

        /* 底部边框（需要额外的类或伪元素，这里使用.bottom-border类作为示例） */
        .topagin-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3%;
            opacity: 0;
            background: linear-gradient(90deg, transparent, #37F1FF);
            animation: moveTopBorderAgain 8s linear infinite;
            animation-delay: 2s;
            /* 注意：由于.bottom-border不是一个伪元素，你需要将其作为一个单独的HTML元素或额外的类添加到.border-animation中 */
        }

        /* 左侧和右侧边框的动画类似，但方向不同，这里只展示左侧 */
        .border-animation::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 1.5%;
            height: 100%;
            background: linear-gradient(to top, transparent, #37F1FF);
            animation: moveLeftBorder 8s linear infinite;
        }

        /* 动画定义 */
        @keyframes moveTopBorder {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(400%);
            }
        }

        @keyframes moveTopBorderAgain {
            0% {
                transform: translateX(-300%);
            }

            75% {
                opacity: 1;
            }

            100% {
                transform: translateX(100%);
            }
        }

        @keyframes moveRightBorder {
            0% {
                transform: translateY(-100%);
            }

            /* 从上到下开始 */
            100% {
                transform: translateY(300%);
            }

            /* 向下移动一个完整的边框高度 */
        }

        @keyframes moveBottomBorder {

            /* 假设.bottom-border是一个独立的元素或类，你需要为它定义类似的动画 */
            0% {
                transform: translateX(200%);
            }

            100% {
                transform: translateX(-200%);
            }
        }

        @keyframes moveLeftBorder {
            0% {
                transform: translateY(300%);
            }

            100% {
                transform: translateY(-100%);
            }
        }

        @keyframes scaleBgImg {
            0% {
                background-size: 100%;
            }

            100% {
                background-size: 150%;
            }
        }
    </style>
</body>

</html>
2024-04-17【动效demo】四周环绕跑马灯效果

推荐阅读更多精彩内容
