纯css实现流向性和动态线条效果的代码
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
思路:
一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子移动
demo:
css部分:
@keyframes mymove { from{left:0px;} to{left:70px;} } .father{ background: #748096; border-radius:5px; position: relative; top: 70px; left: -5px; } .moveson { width:20px; height:8px; background:#a0e80c; border-radius: 5px; animation:mymove 2s linear infinite; position:relative; }
html部分:
<div class="father"> <div class="moveson"></div> </ediv>
总结
下一篇:详解CSS 子元素相对于父元素固定定位解决方案