Take a look at how to achieve the dynamic effect of the revolving door of pictures using CSS?

How to realize the dynamic effect of picture revolving lantern using CSS? The following article will introduce to you how to use css3 animation transform to achieve the revolving image effect. I hope it will be helpful to you!

#Because the project needs to achieve a revolving door effect of a picture. After checking most of the common Vue component libraries, I rarely saw such components, so I manually implemented the revolving door effect based on CSS3 animation. Two solutions immediately come to mind, one is to use a timer, scrollLeft or modify the left attribute value in the position, and the other is to use CSS3's transform and animation.

Choose to use animation to implement it. Since the animation implemented by js runs on the CPU and the animation of css3 runs on the GPU, the rendering cost of css3 is low. Finally, we decided to use css3 to implement this type of operation.

Using scrollLeft

In the beginning, scrollLeft overflow was used to achieve the effect, and a timer was used to trigger it, which would lead to redrawing and reflow every time. (ps: If you need to improve performance, you can use requestAnimationFrame instead of timer triggering. The main advantage is that requestAnimationFrame will concentrate all DOM operations in each frame and complete it in one redraw or reflow, and redraw or reflow. The reflow time interval closely follows the refresh frequency of the browser. Generally speaking, this frequency is 60 frames per second)

(Changing scrollLeft has the same effect as left) Core code:

function toScrollLeft(){
  //  如果容器的宽度大于滚动条距离，则重复滚动
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滚动结束，从新开始
    box.scrollLeft=0;
    setTimeout('toScrollLeft()', 18);
  }
}

Use css3 animation transform

Use css3 animation to implement revolving lantern, use css variables to dynamically set the translateX offset of each state transform, and the most critical animation, some of the effects are as follows Made gif.

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

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img  src="/static/imghwm/default1.png"  data-src="src"  class="lazy"     style="max-width:90%" height="90px" : / alt="Take a look at how to achieve the dynamic effect of the revolving door of pictures using CSS?" >
        </li>
    </ul>
</div>

2. Set the corresponding style

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

3. Finally, set the binding object to the style. The style of the .box element mainly uses css variables, and then uses specific values ​​to dynamically set the effect of each state of the animation. The key code uses animation: cap.length*8 's move infinite linear; which will produce the effect of infinite repeated movement.

ps: This is the main overall operation point, other details are omitted

<div class="box" :style="{
&#39;--card-ul-width-start&#39;:-30+&#39;px&#39;,
&#39;--card-ul-width-middle1&#39;:-cap.length*30+&#39;px&#39;, 
&#39;--card-ul-width-middle2&#39;:-cap.length*60+&#39;px&#39;,
&#39;--card-ul-width-end&#39;:-cap.length*90+&#39;px&#39;
}">
    <ul :style="{&#39;-webkit-animation&#39;:cap.length*8+ &#39;s move infinite linear;&#39;}">
        <li></li>
    </ul>
</div>

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))
    }    
}

(Learning video sharing: css video tutorial)

The above is the detailed content of Take a look at how to achieve the dynamic effect of the revolving door of pictures using CSS?. For more information, please follow other related articles on the PHP Chinese website!