Javascript css3动画中的虚线边框动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28365839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dashed border animation in css3 animation
提问by Sarthak Sharma
I saw this article http://tympanus.net/Tutorials/BorderAnimationSVG/
我看到这篇文章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.
我想在我的 WP 博客中添加这个。这样每个新的帖子 div 在其边框上都有这个动画。但问题是它在 SVG 中。无论如何，我可以在不使用 SVG 的情况下制作此动画，而且我也不想使用 javascript。
Lets say code is:
让我们说代码是：
.go {
width: 900px;
height: 200px;
border: 8px dashed;
}<div class="go"></div>回答by Harry
This much is possible with CSS and is pretty simple when using multiple backgrounds and changing their positions using animations.
这在 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>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-tikifor helping to fix the slight distortion that was originally present at the end of each loop of the animation.
感谢web-tiki帮助修复了最初出现在动画每个循环结束时的轻微失真。
回答by hossein sedighian
based on answer of harry
基于哈利的回答
this can animate all shapes with all sizes
这可以为所有大小的所有形状设置动画
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>回答by CascadiaJS
Here's a way to do it without having to specify the size of the element you want the rotating border on:
这是一种无需指定要旋转边框的元素大小的方法：
.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>回答by Irvin Dominin
With pure CSS you can use repeating-linear-gradientto draw the dots on the background, set the transitionand on hover move the background.
使用纯 CSS，您可以使用repeating-linear-gradient在背景上绘制点，设置transition和悬停移动背景。
Sample css code:
示例 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;
}
Demo:
演示：
.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>回答by Lee Stemkoski
This code is adapted from the answer written by @Harry, modified in response to the question posted by @dude, that will work for a div with any width and height.
此代码改编自@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>回答by jbutler483
This is only a quick example, but it's using pseudo effects to 'move' the border on a hover (note. keyframes would be more beneficial if you wanted to 'continue' the effect)
这只是一个简单的例子，但它使用伪效果在悬停时“移动”边框（注意。如果你想“继续”效果，关键帧会更有用）
.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>A better example
一个更好的例子
This might suit you better since, the animation would be easier to continue too:
这可能更适合您，因为动画也会更容易继续：
.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>回答by Nicolas
Animating a pseudo-element worked better for my round button:
动画伪元素对我的圆形按钮效果更好：
.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>