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

青灯夜游
Release: 2021-12-30 10:38:14
forward
3676 people have browsed it

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!

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

#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);
  }
}
Copy after login

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.

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

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     style="max-width:90%" height="90px" :src="src" / alt="Take a look at how to achieve the dynamic effect of the revolving door of pictures using CSS?" >
        </li>
    </ul>
</div>
Copy after login

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;
}
Copy after login

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>
Copy after login
data(){
    cap:new Array(6).fill(&#39;https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png&#39;)
}
Copy after login
@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))
    }    
}
Copy after login

(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!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template