实现虚线动画效果

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>

 

看完下面的图你将了解度数的设置

 可以根据这种效果实现一些管道，流动方向。类似下面这种。

 感兴趣的可以尝试实现一下。

总结

以上是生活随笔为你收集整理的实现虚线动画效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。