在css3动画中的虚线边框动画 [英] Dashed border animation in css3 animation

问题描述

我看到这篇文章 http://tympanus.net/Tutorials/BorderAnimationSVG/

我想在我的WP博客中添加。所以每个新的post div在它的边界有这个动画。但问题是它在SVG中。有没有反正我可以使这个动画工作，而不使用SVG，也不想使用javascript。

让我们说代码是：

  .go {width：900px; height：200px; border：8px dotted;}  

 < div class = go>< / div>  

解决方案

当使用多个背景并使用动画更改位置时，CSS非常简单。

  .border {height：100px; width：200px;背景：线性梯度（90deg，蓝色50％，透明50％），线性梯度（90deg，蓝色50％，透明50％），线性梯度（0deg，蓝色50％，透明50％ （0deg，蓝色50％，透明50％）;背景重复：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>一些文字< / div>  

---

这是一个从页面加载边界持续移动边框的示例。

  .border {height：100px; width：200px;背景：线性梯度（90deg，蓝色50％，透明50％），线性梯度（90deg，蓝色50％，透明50％），线性梯度（0deg，蓝色50％，透明50％ （0deg，蓝色50％，透明50％）;背景重复：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;动画：border-dance 4s无限线性;} @ 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>一些文字< / div>  

贷记至 web-tiki ，以帮助修复最初出现在动画每个循环结束时的轻微失真。

I saw this article http://tympanus.net/Tutorials/BorderAnimationSVG/

I want to add this in my WP blog. So that each new post div have this animation on its border. But problem is that its in SVG. Is there anyway i can make this animation work without using SVG and also i don't want to use javascript.

Lets say code is:

.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

<div class="go"></div>

解决方案

This much is possible with CSS and is pretty simple when using multiple backgrounds and changing their positions using animations.

.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>

---

Here is a sample with continuous movement of the borders right from the page load.

.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>

Credits to web-tiki for helping to fix the slight distortion that was originally present at the end of each loop of the animation.

这篇关于在css3动画中的虚线边框动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！