我看到这篇文章http://tympanus.net/Tutorials/BorderAnimationSVG/
我想在我的 WP 博客中添加这个。这样每个新的帖子 div 在其边框上都有这个动画。但问题是它在 SVG 中。无论如何，我可以在不使用 SVG 的情况下制作此动画，而且我也不想使用 javascript。
让我们说代码是：
.go {
width: 900px;
height: 200px;
border: 8px dashed;
}<div class="go"></div>这在 CSS 中是可能的，并且在使用多个背景并使用动画改变它们的位置时非常简单。
.border {
height: 100px;
width: 200px;
background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
padding: 10px;
transition: background-position 2s;
}
.border:hover{
background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>这是一个从页面加载开始连续移动边框的示例。
.border {
height: 100px;
width: 200px;
background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
padding: 10px;
animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
0% {
background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
}
100% {
background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>感谢web-tiki帮助修复了最初出现在动画每个循环结束时的轻微失真。
基于哈利的回答
这可以为所有大小的所有形状设置动画
div{
margin:10px;
}
.size1{
background:black;
width:100px;
height:100px;
}
.size2{
background:black;
width:300px;
height:100px;
}
.active-animatioon {
background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
background-position: left top, right bottom, left bottom, right top;
animation: border-dance 1s infinite linear;
}
@keyframes border-dance {
0% {
background-position: left top, right bottom, left bottom, right top;
}
100% {
background-position: left 15px top, right 15px bottom , left bottom 15px , right top 15px;
}
}
}<div class="size1 active-animatioon"></div>
<div class="size2 active-animatioon"></div>这是一种无需指定要旋转边框的元素大小的方法：
.rotating-border {
width: max-content;
background: linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
padding: 10px;
animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
0% {
background-position: 0 0, 100% 100%, 0 100%, 100% 0;
}
100% {
background-position: 100% 0, 0 100%, 0 0, 100% 100%;
}
}<div class="rotating-border">Hello World</div>使用纯 CSS，您可以使用repeating-linear-gradient在背景上绘制点，设置transition悬停并移动背景。
示例 css 代码：
.animationBorder {
display: block;
position: relative;
overflow: hidden;
margin: 12px;
width: 200px;
height: 200px;
color: black;
font-size: 20px;
}
.animationBorder:hover .background {
background-position: 100px 0;
}
.background, .content {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.background {
transition: 1200ms;
background-color: black;
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
background-size: 30px;
}
.content {
transition: 200ms;
margin: 1px;
line-height: 200px;
text-align: center;
background-color: white;
}
演示：
.animationBorder {
display: block;
position: relative;
overflow: hidden;
margin: 12px;
width: 200px;
height: 200px;
color: black;
font-size: 20px;
}
.animationBorder:hover .background {
background-position: 100px 0;
}
.background, .content {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.background {
transition: 1200ms;
background-color: black;
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
background-size: 30px;
}
.content {
transition: 200ms;
margin: 1px;
line-height: 200px;
text-align: center;
background-color: white;
}<span class="animationBorder">
<div class="background"></div>
<div class="content">My post</div>
</span>此代码改编自@Harry 编写的答案，针对@dude 发布的问题进行了修改，该代码适用于任何宽度和高度的 div。
.box
{
position: absolute;
left: 20px;
top: 20px;
width: 150px;
height: 150px;
}
.dashed
{
background:
linear-gradient(90deg, blue 50%, transparent 50%),
linear-gradient(0deg, blue 50%, transparent 50%),
linear-gradient(90deg, blue 50%, transparent 50%),
linear-gradient(0deg, blue 50%, transparent 50%);
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
background-size: 15px 4px, 4px 15px, 15px 4px, 4px 15px;
background-position: left top, right top, left bottom, left top;
padding: 4px;
animation: border-dance 4s infinite linear;
}
@keyframes border-dance
{
0%
{
background-position: left top, right top, right bottom, left bottom;
}
100%
{
background-position: right top, right bottom, left bottom, left top;
}
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel volutpat ante, eu convallis turpis. Cras sit amet est diam. Suspendisse non lectus faucibus, egestas enim quis, feugiat sapien. Nulla pellentesque, risus sit amet ultrices congue, nisl
ante semper est, in tempor eros augue quis tellus. Morbi venenatis varius eros sit amet dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lobortis sit amet lacus quis tincidunt. Curabitur nibh ex,
imperdiet sit amet sem a, ornare vehicula ipsum. Quisque vitae dui dignissim, viverra enim et, porta risus. Pellentesque pharetra at neque eu efficitur.
<div class="box dashed"></div>