div描边转动特效

咸蛋超人l

于 2023-04-21 10:14:39 发布

阅读量164

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_50636536/article/details/130282059

版权

该文章介绍了如何利用CSS的::before和::after伪元素，结合clip属性和关键帧动画(@keyframes)来实现一个蛇形移动的边框效果。通过调整不同阶段的clip矩形坐标，创建出从红色到蓝色的循环变换，形成视觉上的蛇形运动。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<div class="bruce flex-ct-x" data-title="使用clip描绘蛇形边框">
    <div class="snakelike-border"></div>
</div>
`
 .snakelike-border {
            position: relative;
            width: 190px;
            height: 190px;
            background-color: #3c9;

        }
        .snakelike-border::before,
        .snakelike-border::after {
             position: absolute;
             left: -5px;
             right: -5px;
             top: -5px;
             bottom: -5px;
             border: 5px solid;
             content: "";
             animation: move 5s linear infinite;
         }
        .snakelike-border::before {
             border-color: #f66;
         }
        .snakelike-border::after {
             border-color: #66f;
             animation-delay: -2.5s;
         }
        @keyframes move {
            0%,
            100% {
                clip: rect(0 200px 5px 0);
            }
            25% {
                clip: rect(0 200px 200px 195px);
            }
            50% {
                clip: rect(195px 200px 200px 0);
            }
            75% {
                clip: rect(0 5px 200px 0);
            }
        }``