1.案例一

?利用css3的屬性即可完成，在百度查看時(shí)，第一次發(fā)現(xiàn)是用js完成的，果斷放棄。然后看到有類似動(dòng)畫，記錄下來(lái)方便以后使用。

css部分代碼

.line {width: 100px;height: 100px;background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;background-position: 0 0, 100% 0, 0 0, 0 100%;animation: move2 1s infinite linear;}@keyframes move2 {from {}to {background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;}}

js代碼

<div class="line" style="margin-bottom: 20px"></div>

?

看完下面的圖你將了解度數(shù)的設(shè)置

?可以根據(jù)這種效果實(shí)現(xiàn)一些管道，流動(dòng)方向。類似下面這種。

?感興趣的可以嘗試實(shí)現(xiàn)一下。

總結(jié)

以上是生活随笔為你收集整理的实现虚线动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。