纯CSS3流光边框特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:4909

前端 css css3
{}
纯CSS3流光边框特效

实现原理： div的before元素当成左边框 内部一个class=bottom的i标签当下边框 div的after元素当成右边框 内部一个class=top的i标签当上边框

效果图： 请添加图片描述 原理图： 请添加图片描述

左边框： 在这里插入图片描述

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>纯CSS3流光边框特效</title>

    <style>
        .fly_border {

            border: 1px solid rgba(32, 254, 255, 0.3);
            /* 宽高和相对定位是一定要给的,因为这会影响.animate-border子元素的定位 */
            position: relative;
            width: 400px;
            height: 300px;
            overflow: hidden;
            margin: 200px auto;
        }

        .fly_border::before {
            content: " ";
            position: absolute;
            width: 1px;            
            height: 100%;
            top: -100%;
           left: 0;
            background-image: linear-gradient(
   0deg,
   transparent,
   #03e9f4,
   transparent
            );
            animation: two 4s linear infinite;
        }

        .fly_border::after {
            content: " ";
            position: absolute;
            width: 1px;            
            height: 100%;
            bottom: -100%;
           right: 0;
            background-image: linear-gradient(
   360deg,
   transparent,
   #03e9f4,
   transparent
            );
            animation: four 4s linear 2s infinite;
        }
        
        .fly_border i {
            position: absolute;
            display: inline-block;
            height: 1px;
            width: 100%;
        }

        .fly_border .bottom {
            bottom: 0;
           left: -100%;
            background-image: linear-gradient(
   270deg,
   transparent,
   #03e9f4,
   transparent
            );
            animation: one 4s linear 1s infinite;
        }

        .fly_border .top {
            top: 0;
           right: -100%;
            background-image: linear-gradient(
   270deg,
   transparent,
   #03e9f4,
   transparent
            );
            animation: three 4s linear 3s infinite;
        }

        body {
            height: 100%;
            background-color: #0f222b;
        }


        @keyframes one {
            0% {
   left: -100%;
            }
            50%,
            100% {
   left: 100%;
            }
        }
        
        @keyframes two {
            0% {
   top: -100%;
            }
            50%,
            100% {
   top: 100%;
            }
        }
        
        @keyframes three {
            0% {
   right: -100%;
            }
            50%,
            100% {
   right: 100%;
            }
        }
        
        @keyframes four {
            0% {
   bottom: -100%;
            }
            50%,
            100% {
   bottom: 100%;
            }
        }

        </style>

</head>

<body>

    <div>

        <div class="fly_border"><i class="top"></i><i class="bottom"></i></div>

    </div>

</body>

</html>

参考资料： 青青子衿~~ <a href="https://blog.csdn.net/weixin_45727272/article/details/123841852?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-6-123841852-blog-118294454.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-6-123841852-blog-118294454.pc_relevant_aa2&utm_relevant_index=10">vue 实现边框流光动画</a>

原文地址：https://blog.csdn.net/keyunq/article/details/127689994?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168940081016800185827541%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168940081016800185827541&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-19-127689994-null-null.142^v88^control,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/42227cab60c448b69c12b23ffe11434d

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号