Javascript css3动画中的虚线边框动画

我看过这篇文章

我想把这个添加到我的WP博客中。这样，每个新的post div的边界上都有这个动画。但问题是，它在SVG中。不管怎样，我不需要使用SVG也不想使用javascript就可以让这个动画工作

假设代码是：

。开始{
宽度：900px；
高度：200px；
边框：8px虚线；
}

---

这只是一个简单的示例，但它使用伪效果在悬停时“移动”边框（注意，如果您想“继续”效果，关键帧将更为有用）

。开始{
宽度：900px；
高度：200px；
位置：相对位置；
边框：8px黑色虚线；
}
.前进：悬停：前进{
内容：“；
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：-8px；
左：-8px；
边框：8px纯黑；
}
.开始：悬停：之后{
内容：“；
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：-8px；
左：-8px；
边框：8px白色虚线；
}

悬停然后“取消悬停”以查看效果

这在CSS中是可能的，并且在使用多个背景和使用动画更改其位置时非常简单

.border{
高度：100px；
宽度：200px；
背景：线性梯度（90度，蓝色50%，透明50%），线性梯度（90度，蓝色50%，透明50%），线性梯度（0度，蓝色50%，透明50%），线性梯度（0度，蓝色50%，透明50%）；
背景重复：重复x，重复x，重复y，重复y；
背景尺寸：16px4px，16px4px，4px16px，4px16px；
背景位置：0px 0px，212px 116px，0px 116px，216px 0px；
填充：10px；
过渡：背景位置2s；
}
.边界：悬停{
背景位置：212PX0PX、0PX116PX、0PX0PX、216PX116PX；
}

一些纯CSS文本

可用于在背景上绘制点，设置鼠标悬停并移动背景

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{
显示：块；
位置：相对位置；
溢出：隐藏；
利润率：12像素；
宽度：200px；
高度：200px；
颜色：黑色；
字体大小：20px；
}
.animationBorder:悬停。背景{
背景位置：100px0；
}
.背景，.内容{
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
}
.背景{
过渡：1200ms；
背景色：黑色；
背景图像：重复线性渐变（45度，透明，透明10px，#fffffff10px，#fffffff20px）；
背景尺寸：30px；
}
.内容{
过渡时间：200ms；
保证金：1px；
线高：200px；
文本对齐：居中；
背景色：白色；
}

我的职位

此代码改编自@Harry编写的答案，根据@dude发布的问题进行修改，适用于任何宽度和高度的div

.box
{
位置：绝对位置；
左：20px；
顶部：20px；
宽度：150px；
高度：150像素；
}
.虚线
{
背景：
线性梯度（90度，蓝色50%，透明50%），
线性梯度（0度，蓝色50%，透明50%），
线性梯度（90度，蓝色50%，透明50%），
线性梯度（0度，蓝色50%，透明50%）；
背景重复：重复x，重复y，重复x，重复y；
背景尺寸：15px4px，4px15px，15px4px，4px15px；
背景位置：左上、右上、左下、左上；
填充：4px；
动画：边界舞4s无限线性；
}
@边界舞关键帧
{
0%
{
背景位置：左上、右上、右下、左下；
}
100% 
{
背景位置：右上、右下、左下、左上；
}
}

Lorem ipsum door sit amet，一位杰出的领导者。埃尼安·韦尔帕特·安特，欧盟的康瓦利斯·特皮斯。这是我最大的直径。非莱克托斯·福西布斯、埃吉斯塔斯·埃尼姆·奎斯、封建智者。纳拉·佩伦茨克，莱索斯·希特·乌尔特里斯·康格，尼斯拉
在《奥古斯·奎斯·特卢斯的暂时爱欲》中，这是一部前三集。莫比·维尼那提斯·瓦里乌斯·厄罗斯坐在阿梅特·达皮布斯。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。他坐在我的座位上。库拉比图尼布，
对amet sem a，ornare Vehiclula ipsum进行了研究。威严的生活，维韦拉·埃尼姆和里苏斯之门。Pellentsque pharetra在neque eu efficitur。

基于

这可以为所有大小的所有形状设置动画

div{
利润率：10px；
}
.尺码1{
背景：黑色；
宽度：100px；
高度：100px；
}
.size2{
背景：黑色；
宽度：300px；
高度：100px；
}
.活动动画{
背景图像：线性渐变（90度，银色50%，透明50%）、线性渐变（90度，银色50%，透明50%）、线性渐变（0度，银色50%，透明50%）、线性渐变（0度，银色50%，透明50%）；
背景重复：重复x，重复x，重复y，重复y；
背景尺寸：15px2px，15px2px，2px15px，2px15px；
背景位置：左上、右下、左下、右上；
动画：边界舞1s无限线性；
}
@边界舞关键帧{
0% {
背景位置：左上、右下、左下、右上；
}
100% {
背景位置：左上15px，右下15px，左下15px，右上15px；
}
}
}

---

以下是一种无需指定旋转边框所在元素大小的方法：

。旋转边框{
宽度：最大含量；
背景：线性梯度（90度，紫色50%，透明50%），线性梯度（90度，紫色50%，透明50%），线性梯度（0度，紫色50%，透明50%），线性梯度（0度，紫色50%，透明50%）；
背景重复：重复x，重复x，重复y，重复y；
背景尺寸：15px4px，15px4px，4px15px，4px15px；
填充：10px；
动画：边界舞4s无限线性；
}
@边界舞关键帧{
0% {
背景位置：0,100%100%，0,100%，100%0；
}
100% {
背景位置：100%0，0