Making energy flow effect with CSS animation and SVG

The final effect is as follows:

the animation is divided into two steps

  • making the running track
  • Creating the DOM and making the running track according to the track animation

first, we need to draw a light blue translucent road at the bottom as a pipe for energy flow < br > here we use SVG path (in fact, we can use the background image directly), and the code is as follows:

<svg>
    <!-- Tool description prompt,Used infillDo filtering and other operations,Here's the glow at the bottom of the ball -->
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style={{ stopColor: "rgba(2,246,255,.5)" }} />
            <stop offset="100%" style={{ stopColor: "rgba(2,246,255,0)" }} />
        </radialGradient>
    </defs>
    <!-- Here we go through itNA light blue line path dIs the path-->
    <path d={item.path} stroke="rgba(29,159,167,0.4)" fill="transparent" strokeWidth={5}></path>
    ...
    <!-- Here's the glowing ball Formed by the superposition of two circles -->
    <g>
        <circle cx={cx} cy={cy} r="15" fill="url(#grad1)"></circle>
        <circle cx={cx} cy={cy} r="5" fill="rgba(2,246,255)"></circle>
    </g>
</svg>

Create Dom and set the motion offset path through the offset path attribute according to the core principle of trajectory animation

here, and then set the offset through offset distance, so that the elements can move according to a certain trajectory through CSS3 animation

<!-- Here, make sure the box is the sameSVGThe positions of the boxes are coincident,Uniform width and height,So that the path points can be consistent -->
<div className={styles.animate}>
    <!-- Here we go through itNindividualdiv,让每一individualdivAll in accordance withoffsetPaththat issvgwithinpathOfdOf值进行流动 -->
    <!-- animationDelay A negative number indicates that the rendering was performed before rendering, 渲染时就可以铺满整individual路径 -->
    <div key={index} className={styles.point3} style={{ "offsetPath": "path('M 105 34 L 5 34')", "animationDelay": `-${index * 1}s`, "animationDuration": '5s', 'animationPlayState': `${stop ? 'paused' : 'running'}` }}></div>
    ...
</div>
.point3 {
    width: 10px;
    height: 2px;
    // offset-path: path('M 248 108 L 248 172 L 1510 172');
    offset-distance: 0%;
    animation: flow 20s linear normal infinite;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, #FEFE02);
    position: absolute;
    left: 0;
    right: 0;
}
}

@keyframes flow {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}
Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image