Pure CSS code to achieve flow and dynamic line effects

Ideas:
An outer box sets the background; an inner box sets the width and height of the background, and sets animate to make the box move

demo:

CSS part:

@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 part:

<div class="father">
     <div class="moveson"></div>
</ediv>

Summarize

This concludes this article about how to use pure CSS to achieve flow and dynamic line effects. For more information about how to use CSS to achieve flow and dynamic line effects, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!