Shulou(Shulou.com)06/02 Report--

Editor to share with you how to use CSS to achieve the dynamic effect of picture walking lanterns. I hope you will get something after reading this article. Let's discuss it together.

Because the project needs to achieve the walking lantern effect of a picture. After looking at most of the general vue component libraries, I seldom see such components, so I manually realize the walking lantern effect based on css3 animation. Immediately think of two scenarios, one is to locate the value of the left attribute in position through a timer, scrollLeft, or modification, and the other is through css3's transform and animation.

Choose to use animation, because the animation realized by js runs in CPU,css3 and the animation runs in GPU,css3, it is low cost to render. Finally, it is decided to use css3 to achieve this kind of operation.

Use scrollLeft

At first, scrollLeft+overflow is used to achieve the effect, which is triggered by a timer, and then results in redrawing and reflux each time. (ps: if you need to improve performance, you can use requestAnimationFrame instead of timer trigger. The main advantage is that requestAnimationFrame centralizes all DOM operations in each frame, which is done in one redraw or reflow, and the interval between redrawing or reflux closely follows the refresh rate of the browser, which is generally 60 frames per second.)

(changing scrollLeft is the same as left effect) Core code:

Function toScrollLeft () {/ / if the width of the container is greater than the scroll bar distance, repeat scrolling if (divWidth > box.scrollLeft) {box.scrollLeft++ setTimeout ('toScrollLeft ()', 18);} else {/ / end scrolling and start over box.scrollLeft=0; setTimeout ('toScrollLeft ()', 18);}} use css3 animation transform

Using css3 animation to achieve walking lanterns, using css variables to dynamically set the translateX offset of each state transform, as well as the most critical animation, to achieve some of the effects of the following gif.

1. Initially set up the html layout and set up a div container

two。 Set the corresponding style

.box {display: flex;overflow: hidden;flex-direction: column;border-radius:12px;width: 100% position height: 100% ul display: flex;}

3. Finally, the binding object is set to the style, and the css variable is mainly used on the style of the .box element, and then the effect of each state is dynamically animated by specific values. If the key code uses animation:cap.length*8+'s move infinite linear;, it will have the effect of infinitely repeated movement.

Ps: this is the main operating point of the whole. Other details are omitted.

Data () {cap:new Array (6). Fill ('https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png')}@keyframes move {0% {transform:translateX (var (--card-ul-width-start))} 30% {transform:translateX (var (--card-ul-width-middle1))} 70% {transform:translateX (var (--card-)) Ul-width-middle2)} 100% {transform:translateX (var (--card-ul-width-end))}} finished reading this article I believe you have a certain understanding of "how to use CSS to achieve the dynamic effect of picture walking lanterns". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.