1.案例一

?利用css3的屬性即可完成，在百度查看時，第一次發現是用js完成的，果斷放棄。然后看到有類似動畫，記錄下來方便以后使用。

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>

?

看完下面的圖你將了解度數的設置

?可以根據這種效果實現一些管道，流動方向。類似下面這種。

?感興趣的可以嘗試實現一下。

總結

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

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