用CSS做一个动态的DIV容器边框

2024-05-11
发布自 hacken
开启 2024-05-10

我们经常会看到这样的小动画，但他又不是视频，也不是GIF图片，而且文字还可以编辑。

用做一些重要的展示，重点突出内容是非常好的效果。

这段文字够抢眼吧！

文章目录

Html部分

需要有2层DIV，外层为动画层，内层需要添加背景色覆盖内部。

<div class="kuang">
<div class="neibu">这段文字够抢眼吧！</div>
</div>

Css部分

请根据自己的需要调整

@keyframes barberpole {
from {background-position: 0 0}
to {background-position: 60px 30px }
}
.kuang {
content: "";
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 10px 10px;
background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);
animation: barberpole 1s linear infinite;
}
}