我看到这篇文章http://tympanus.net/Tutorials/BorderAnimationSVG/
我想在我的WP博客中添加这个.这样每个新的post div都会在其边框上显示这个动画.但问题是它在SVG中.无论如何我可以在不使用SVG的情况下使这个动画工作,我也不想使用Javascript.
让我们说代码是:
.go {
width: 900px;
height: 200px;
border: 8px dashed;
}
1> Harry..：
使用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;
}
Some text
2> 小智..：
根据哈利的回答
这可以使各种尺寸的所有形状动起来
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;
}
}
}
3> Irvin Domini..：
使用纯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;
}
My post
4> Lee Stemkosk..：
此代码改编自@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.
5> CascadiaJS..：
这是一种无需指定旋转边框所要元素大小的方法：
.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%;
}
}
Hello World
京公网安备 11010802041100号