Image scrolling effect made with CSS3

Image scrolling effect made with CSS3

Achieve results

Implementation Code

html

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>

CSS3

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 5s slidy infinite; 
}

other

If you have requirements for switching speed, just modify the last time of CSS3

The above is the details of the image scrolling effect created by CSS3. For more information about CSS3 image scrolling, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  mysql+mybatis implements stored procedure + transaction + multi-concurrent serial number acquisition

>>:  Detailed examples of using JavaScript event delegation (proxy)

Recommend

MySQL 5.7.17 winx64 decompression version installation and configuration method graphic tutorial

This article shares the installation and configur...

mysql join query (left join, right join, inner join)

1. Common connections for mysql INNER JOIN (inner...

HTML table tag tutorial (11): horizontal alignment attribute ALIGN

In the horizontal direction, you can set the alig...

How to use the VS2022 remote debugging tool

Sometimes you need to debug remotely in a server ...

Solution to the problem of saving format in HTML TextArea

The format of textarea can be saved to the databas...

HTML tutorial, HTML default style

html , address , blockquote , body , dd , div , d...

Use of MySQL official export tool mysqlpump

Table of contents Introduction Instructions Actua...

Javascript common higher-order functions details

Table of contents 1. Common higher-order function...

How to use Zen coding in Dreamweaver

After I published my last article “Zen Coding: A Q...

Vue+thinkphp5.1+axios to realize file upload

This article shares with you how to use thinkphp5...

Example of how to increase swap in CentOS7 system

Preface Swap is a special file (or partition) loc...

Docker sets up port mapping, but cannot access the solution

#docker ps check, all ports are mapped CONTAINER ...

Build a WebRTC video chat in 5 minutes

In the previous article, I introduced the detaile...

...

Tips on disabling IE8 and IE9's compatibility view mode using HTML

Starting from IE 8, IE added a compatibility mode,...