流动边框效果

边框流动效果

效果如图所示

1715611706898

思路:

通过结构伪类::before创建一个锥形渐变的背景, 并旋转起来
设置z-index:-2, 防止遮住文本,并且给父元素设置z-index, 形成层级的比较
通过结构伪类::after设置一个叠加的背景, z-index:-1, 在before之上, 文本之下

里面需要注意的是层级的比较

文本不甚至z-index, 默认是继承的, 这样是显示不出来的
before和after结构伪类之间的层级关系
vmin表示vh和vw之间比较小的
inset: 1vmin表示top, right, bototm, left 的值都是1vmin
需要注意的是 ::before和文本是同级的关系, 不是相互包含, 所以可以同时显示

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            min-height: 100vh;
            background-color: #000;
        }
        .box {
            padding: 15vmin 10vmin;
            background-color: #fff;
            border-radius: 5vmin;
            color: #66ddf7;
            font-size: 8vmin;
            position: relative;
            overflow: hidden;
            z-index: 10;
        }
        .box::before {
            content: '';
            width: 200%;
            height: 200%;
            background-color: #22292f;
            position: absolute;
            left: -50%;
            top: -50%;
            background-image: conic-gradient(transparent, #66ddf7, transparent 30%);
            z-index: -2;
            animation: rotate 5s linear infinite;
        }
        .box::after {
            content: '';
            position: absolute;
            /* inset: 1vmin; */
            top: 1vmin;
            left: 1vmin;
            bottom: 1vmin;
            right: 1vmin;
            background-color: #000;
            border-radius: 4vmin;
            z-index: -1;
        }
        @keyframes rotate {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">边框流动效果</div>
</body>
</html>