Pure CSS achieves carousel image effects. CSS3 black technology that you don't know, csscss3

Pure CSS achieves carousel image effects. CSS3 black technology that you don't know, csscss3
Preface

Carousel images are already a common feature, especially on the top of the homepage of various apps. Different images are often displayed in turn.

When talking about how to implement carousel images, many people's first response is to use the Javascript timer. Of course, this method can be implemented. However, it is a little complicated. In this article, we will look at how to use pure CSS code to implement carousel images without using Javascript.

All the code in this article is stored in the group file. If you are interested, you can download it.

CSS

Effect

First, let's take a look at the carousel effect only implemented by CSS.

Implementation

Detailed analysis

After seeing the above implementation results, we will analyze the structure on the next page.

• The page layout requires five images with fixed width.

• Each image corresponds to a title. The title is implemented by ul> li. The width is calculated in advance and the title is rolled along with the image.

• There is an index at the bottom of 1, 2, 3, 4, 5 indicating the order of the images. The corresponding image is displayed after you move the cursor up.

HTML page

Next, let's look at how the overall effect is achieved through the Code layer.

First, let's take a look at the implementation of the HTML page. The Code contains descriptions for each region.

HTML page

CSS Section

This effect is mainly achieved through CSS code. The amount of code is large. Let's look at it separately.

• Outer container

For the outermost container, we set absolute positioning to facilitate the positioning of the sub-elements of the image title.

Outer container

• Image title

We also use absolute positioning for the title of the image, and display the title in one row horizontally to facilitate horizontal scrolling during the animation.

The Code is as follows.

 

Image title

• Image and image container

Next, set the image container attributes and the basic image size.

The image container also uses absolute positioning, and the width can be dynamically set based on the number of images. Set the width and height of each image. The Code is as follows.

Image and image container

• Animation Effects

Then set the animation effect of the image. For any image, the animation enters the static state, and the intermediate effect can be customized at will.

Here, the intermediate effect is set to an interval of 5%, and the position is switched at other times. Because the image is in a horizontal distribution, You can offset it by setting the value of margin-left as a negative number.

Animation Effects

• Basic attributes of a digital Index

The following numeric icons are also set through basic CSS attributes, including width and height, row height, and transparency.

After you move the cursor over the corresponding number, the number will show different colors. When you move the mouse over a number, the animation will be paused.

Basic attributes of a digital Index

• Offset of the numeric index

Because the number is displayed in the horizontal direction, you must set the horizontal offset of each number.

Horizontal numeric offset

• Animation Effect of hovering the cursor over a number

Then, you can process the animation effect of the mouse over the number. Because each image corresponds to a specific number, you need to calculate the start position and end position of each animation.

Animation Effect of hovering the cursor over a number

• Specifies the number assigned to the animation effect.

The last step is to assign the defined animation effect to a specified number. Each number has a specific id. The Code is as follows.

Specifies the number assigned to the animation effect.

Now that all the steps are completed, you can get the animation effect starting with the article.

 

Conclusion

This article uses CSS to achieve a carousel image, which is better than using JS to reduce page blocking.

Have you thought like this?

1. Why?

2. Can it be played cyclically like JavaScript? You can jump from the first graph to the end of the last graph.

3. Have you mastered this idea?

Web Front-end/H5/javascript Learning Group: 250777811

Welcome to follow this public account → [web Front-end EDU] and learn the front-end together! You are welcome to leave a message to discuss and forward it together.