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

[vc_row][vc_column][woodmart_text_block woodmart_css_id=”663ef6aca55aa” woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NjNlZjZhY2E1NWFhIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]我们经常会看到这样的小动画，但他又不是视频，也不是GIF图片，而且文字还可以编辑。

用做一些重要的展示，重点突出内容是非常好的效果。[/woodmart_text_block][/vc_column][/vc_row][vc_row][vc_column][woodmart_text_block woodmart_css_id=”663dd92fb347e” woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NjNkZDkyZmIzNDdlIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]

[/woodmart_text_block][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=”” woodmart_inline=”no” text_larger=”no”]

Html部分

需要有2层DIV，外层为动画层，内层需要添加背景色覆盖内部。[/vc_column_text][vc_column_text css=”” woodmart_inline=”no” text_larger=”no”]

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

[/vc_column_text][vc_column_text css=”” woodmart_inline=”no” text_larger=”no”]

Css部分

请根据自己的需要调整[/vc_column_text][vc_column_text css=”” woodmart_inline=”no” text_larger=”no”]

@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;
}
}

[/vc_column_text][/vc_column][/vc_row]