CSS to achieve seamless picture infinite loop display effect

<div class="slideshow">
   <div class="images">
      把图片放到这里面。
   </div>
</div>
.slideshow {
  position: relative;
  overflow: hidden;
}
.images {
  background: url(slideshow.jpg);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  animation: slideshow 10s linear infinite;
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}

performance optimization

The above code can work well, but if your machine configuration is not high, or the browser is not advanced enough, there may be some performance problems. In fact, we can use translatex instead of left to stimulate the browser to use 3D transformation and GPU to provide performance.

Note: the 2D transformation and the change of opacity value will not bring this kind of performance change. If you don’t use translatex, you can’t get any benefits from GPU.

.images {
  ...
   
  /* hi 浏览器,使用你的GPU */
  transform: translate3d(0, 0, 0);
}

@keyframes moveSlideshow {  
  100% { 
    -webkit-transform: translateX(-200%);  
  }
}

I don’t particularly like to use this trick to improve the performance of browsers, but as a CSS developer, this technique is very common.

Add more cool effect

In addition to making the picture scroll infinitely, we also need to add some special effects:

Rolling speed changeFrom black and white to color

For speed adjustment, we only need to modify the duration value

.slideshow:hover .images {
  animation-duration: 5s;
}

But this will cause the picture position to jump! Modifying the duration of the animation will produce a new timeline, and the values of some attributes will be adjusted accordingly. As a result, it does not start to accelerate or decelerate at the current position. There is no good way to solve this problem.

Here we use another method. We made two lines of pictures, one moving fast, one moving slowly, one displaying and one hiding. When we need to change the speed, we exchange their display properties.

This produces a relatively smooth switching process.

 

<div class="slideshow">
   <div class="images-1">
     把你的图片放到这里。
   </div>
   <div class="images-2">
   </div>
</div>
.slideshow > div {
   ...

   transition: opacity 0.5s ease-out; 
    
   /* 慢 */
   animation: moveSlideshow 60s linear infinite;
    
   ...
}

.images-1 {
  /* 快 */
  animation: moveSlideshow 20s linear infinite;
}

.slideshow:hover .images-2 {
   opacity: 0;
}

In order to save bandwidth, we combined black and white images with color images.

.images-1 {
  /* Sprite */
  background-position: 0 200px;

  ...
}

This is the final product!

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