A method of making carousel images with CSS3
|
Slideshows are often seen on web pages. They have beautiful pictures. Here is a pure CSS3 slideshow. Here is the style part: You can understand these lines, right?
<style>
*{margin:0;padding:0;}
a{text-decoration:none}
li{list-style:none;}The design width should not exceed the total width of the carousel images plus the width of the first image (the width of the first image is added to make the carousel effect visible). Mine is 1500 width and 200 height, and then set overflow to hide (eliminate the display area that is still displayed when moved out of the display area)
#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}1000% is a lazy way of writing. It is used to set the width of ul wider. It looks exaggerated because it needs to be at least twice the width of the total image. Why should it be twice the width of less than one image? Because the image is moving to the left (the direction is set by yourself). If it is moved out, there will be no carousel effect without additional images. 1000% is long enough, so there is no need to calculate the total width of the picture. Of course, if there are enough pictures, you don’t have to set it this way. Just set half of the total width plus the width of less than one picture. The name of the animation to be rotated, and how often it is rotated
#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}Set the float to display all images in one line and the width of the images
#box ul li{float:left;width:133px;height:200px;}Set mouse over pause
#box:hover ul{animation-play-state:paused;}Set the animation name and the direction of the carousel (animation effect)
@keyframes animal {
0%{margin-left:0;}
100%{margin-left:-1463px;}
}
</style>Below is the body part The slideshow is usually clickable, so it is placed in the a tag.
<body>
<div id="box">
<ul>
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
<li><a href="#"><img src="images/4.jpg" /></a></li>
<li><a href="#"><img src="images/5.jpg" /></a></li>
<li><a href="#"><img src="images/6.jpg" /></a></li>
<li><a href="#"><img src="images/7.jpg" /></a></li>
<li><a href="#"><img src="images/8.jpg" /></a></li>
<li><a href="#"><img src="images/9.jpg" /></a></li>
<li><a href="#"><img src="images/10.jpg" /></a></li>
<li><a href="#"><img src="images/11.jpg" /></a></li>
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
<li><a href="#"><img src="images/4.jpg" /></a></li>
<li><a href="#"><img src="images/5.jpg" /></a></li>
<li><a href="#"><img src="images/6.jpg" /></a></li>
<li><a href="#"><img src="images/7.jpg" /></a></li>
<li><a href="#"><img src="images/8.jpg" /></a></li>
<li><a href="#"><img src="images/9.jpg" /></a></li>
<li><a href="#"><img src="images/10.jpg" /></a></li>
<li><a href="#"><img src="images/11.jpg" /></a></li>
<li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</body> There is more than one way to implement a carousel. I will share it with you next time! |
<<: MySQL query optimization using custom variables
>>: How to restore docker container data
Recommend
Detailed tutorial on configuration method of Mysql 5.7.19 free installation version (64-bit)
Download mysql-5.7.19-winx64 from the official we...
vue-cli configuration uses Vuex's full process record
Table of contents Preface Installation and Usage ...
Vue Element-ui form validation rule implementation
Table of contents 1. Introduction 2. Entry mode o...
Three methods of automatically completing commands in MySQL database
Note: The third method is only used in XSell and ...
How to use wangEditor in vue and how to get focus by echoing data
Rich text editors are often used when doing backg...
js to achieve cool fireworks effect
This article shares the specific code for using j...
Ten Experiences in Web Design in 2008
<br />The Internet is constantly changing, a...
Detailed tutorial on how to create a user in mysql and grant user permissions
Table of contents User Management Create a new us...
MySQL 8.0 error The server requested authentication method unknown to the client solution
After installing the latest version 8.0.11 of mys...
Detailed explanation of the transition attribute of simple CSS animation
1. Understanding of transition attributes 1. The ...
Detailed explanation of MySQL Explain
In daily work, we sometimes run slow queries to r...
HTML drawing user registration page
This article shares the specific implementation c...
Page Refactoring Skills - Javascript, CSS
About JS, CSS CSS: Stylesheet at the top Avoid CS...
Example of assigning values to ActiveX control properties by param name in a web page
Copy code The code is as follows: <HTML> &l...
Vue3 implements CSS infinite seamless scrolling effect
This article example shares the specific code of ...