css3 动画中的虚线边框动画
Dashed border animation in css3 animation
我看到这篇文章 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>为伪元素设置动画效果更适合我的圆形按钮：
.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>此代码改编自 @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>这只是一个简单的例子，但它使用伪效果在悬停时"移动"边框(注意，如果你想"继续"效果，关键帧会更有益(
.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>相关文章：
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画(）问题
- EaseJS拖放;放下(动画CC）电影剪辑的鼠标坐标
- jQuery动画-边框宽度和颜色
- css3 动画中的虚线边框动画
- 动画添加边框(先增大然后缩小）
- HTML 分区边框动画
- CSS:悬停时动画边框
- 如何使此更改边框颜色动画停止
- HTML Canvas 中的 Javascript Animation - 无法将动画保留在边框内
- 无法使用 jQuery 对边框颜色进行动画处理
- 制作边框样式动画
- 设置边框颜色的动画
- Jquery动画裁剪边框
- 边框线动画
- CSS边框悬停动画
- 使用CSS/JS制作的发光边框动画
- 动画边框底部的长度
