css3动画中的虚线边框动画

问题描述 投票：0回答：7

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

我想将其添加到我的 WP 博客中。这样每个新的 post div 的边框上都有这个动画。但问题是它是 SVG 格式的。无论如何，我可以在不使用 SVG 的情况下使这个动画工作，而且我也不想使用 javascript。

假设代码是：

.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}
<div class="go"></div>

javascript jquery html css
7个回答
75
投票

这一切都可以通过 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 帮助修复了动画每个循环末尾最初出现的轻微失真。

44
投票

基于harry

的回答

这可以为所有尺寸的所有形状制作动画

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>

编辑：删除了额外的括号

24
投票

这里有一种方法，无需指定您想要旋转边框的元素的大小：

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

12
投票

使用纯 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>

9
投票

为我的圆形按钮设置伪元素动画效果更好：

.border {
    position: relative;
    border: 0;
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
  border: 2px dashed limegreen;
  animation: rotate 20s linear infinite;
}
  
@keyframes rotate {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
<div class="border"> hello </div>

6
投票

此代码改编自@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>

4
投票

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

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

.go:hover:before{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px solid black;
  }

.go:hover:after{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px dashed white;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="go">hover then 'unhover' to see effect</div>

一个更好的例子

这可能更适合您，因为动画也更容易继续：

.bord {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.spinner {
  position: absolute;
  height: 90%;
  width: 90%;
  background: black;
  top: 5%;
  left: 5%;
  transition: all 0.4s;
}
.go {
  position: absolute;
  height: 90%;
  width: 90%;
  background: white;
  top: 5%;
  left: 5%;
}
.bord:hover .spinner {
  transform: rotate(90deg);
  height: 300px;
  width: 300px;
  top: 0;
  left: 0;
}
<div class="bord">
  <div class="spinner"></div>
  <div class="go">hover me!</div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.