100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 纯css实现流向性/动态线条效果

纯css实现流向性/动态线条效果

时间:2022-11-09 23:00:01

相关推荐

纯css实现流向性/动态线条效果

思路:

一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。