生活随笔
收集整理的這篇文章主要介紹了
边框流光效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
datav庫針對vue.js打造的炫酷效果組件庫
css3動畫寫流光效果
<div class="outContainer"><span></span><span></span><span></span><span></span>
</div>
.outContainer{position:relative
;overflow:hidden
;
}
.outContainer span:nth-child(1) {top: 0
;left: 0
;width: 100%
;height: 2px
;background: linear-gradient(90deg,transparent,#03e9f4
);animation: animate1 1s linear infinite
;
}
@keyframes animate1{0% {left: -100%
;}50%, 100% {left: 100%
;}
}
.outContainer span:nth-child(2) {top: -100%
;right: 0
;width: 2px
;height: 100%
;background: linear-gradient(180deg,transparent,#03e9f4
);animation: animate2 1s linear infinite
;animation-delay: .25s
;
}
.outContainer span:nth-child(3) {bottom: 0
;right: 0
;width: 100%
;height: 2px
;background: linear-gradient(270deg,transparent,#03e9f4
);animation: animate3 1s linear infinite
;animation-delay: .50s
;
}
.outContainer span:nth-child(4) {bottom: -100%
;left: 0
;width: 2px
;height: 100%
;background: linear-gradient(360deg,transparent,#03e9f4
);animation: animate4 1s linear infinite
;animation-delay: .75s
;
}
@keyframes animate2{0% {top: -100%
;}50%, 100% {top: 100%
;}
}
@keyframes animate3{0% {right: -100%
;}50%, 100% {right: 100%
;}
}
@keyframes animate4{0% {bottom: -100%
;}50%, 100% {bottom: 100%
;}
}
總結
以上是生活随笔為你收集整理的边框流光效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
