datav庫針對vue.js打造的炫酷效果組件庫

css3動畫寫流光效果

<div class="outContainer"><span></span><span></span><span></span><span></span> </div> .outContainer{/*width: ...; 依據實際給width*/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%;} }

總結

以上是生活随笔為你收集整理的边框流光效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。