javascript - 请问有没有什么属性可以让边框线围绕着图片动起来
本文介绍了javascript - 请问有没有什么属性可以让边框线围绕着图片动起来的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
各位大神,请问有没有什么属性可以让边框线围绕着图片动起来,或者有方法可以实现这样的效果。
解决方案
仅举个粗糙的例子:
<div class="border"></div>
body {
background: #000;
}
.border {
position: relative;
margin: 50px auto;
width: 100px;
height: 100px;
background: #fff;
}
.border:after {
content: '';
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
background-image:
linear-gradient(to bottom, #ff0, #ff0 50%, #000 0%),
linear-gradient(to bottom, #ff0, #ff0 50%, #000 0%),
linear-gradient(to right, #ff0, #ff0 50%, #000 0%),
linear-gradient(to right, #ff0, #ff0 50%, #000 0%);
background-position: 0 0, 100% 0, 0 0,0 100%;
background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
background-size: 2px 10px, 2px 10px, 10px 2px, 10px 2px;
animation: border 200ms linear infinite;
}
@keyframes border {
0% {
background-position: 0 0, 100% 0, 0 0,0 100%;
}
100% {
background-position: 0 -5px, 100% 5px, 5px 0,-5px 100%;
}
}
这篇关于javascript - 请问有没有什么属性可以让边框线围绕着图片动起来的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文