纯CCS实现流动边框

如上所示的效果图，一个带有流动边框的卡片，主要使用径向渐变、改变元素位置实现。鼠标悬停的时候添加周边阴影。

实现过程

🙂HTML代码

<body>
    <div class="box">
    </div>
</body>

😀样式

制作一个div块
使用before伪元素画一个等比大的径向渐变元素

body {
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #0D1428;
}
.box {
    width: 150px;
    height: 150px;
    background-color: #172033;
    position: relative;
    border-radius: 10px;
}
.box::before {
    content: '';
    position: absolute;
    height: 300px;
    width: 300px;
    background: radial-gradient(#01D17D, transparent, transparent);
}

😄使用keyframe自定义一个animate的动画，然后在before伪元素中使用，设置box元素overflow:hidden

 body {
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #0D1428;
}
.box {
    width: 150px;
    height: 150px;
    background-color: #172033;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.box::before {
    content: '';
    position: absolute;
    height: 300px;
    width: 300px;
    background: radial-gradient(#01D17D, transparent, transparent);
    animation: animate 1.5s linear infinite;
}
 @keyframes animate {
    0% {
        transform: translate(-150px, -150px);
    }
    25% {
        transform: translate(0, -150px);
    }
    50% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(-150px, 0);
    }
    100% {
        transform: translate(-150px, -150px);
    }
}

😄接下来使用after伪元素添加一个遮罩, 并且在鼠标移上去的时候暂停动画和显示阴影

.box::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 10px;
    background-color: #172033;
} 
.box:hover::before {
    animation: none;
    background: transparent;
}
.box:hover{
    box-shadow: 0 0 4px #01D17D, 0 0 4px #01D17D, 0 0 80px #01D17D;
}