Examples of how to use CSS3 to achieve an image carousel effect-Front-end Q&A-php.cn

Examples of how to use CSS3 to achieve an image carousel effect

PHPz

Release： 2023-04-06 17:03:46

Original

1257 people have browsed it

With the development of the Internet, web design pays more and more attention to user experience. Image carousels have also become a common element in web design, especially in commercial websites, where image carousels have become an important way to display information such as products, brands, events, etc. This article will introduce how to use CSS3 to achieve a simple image carousel effect.

HTML structure

First, we need to prepare a basic HTML structure. Create a container in the page and add multiple images inside it. Here, we will use ul and li tags to create a picture list for the picture carousel, where each picture is a li tag. The code is as follows:

<div class="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

Copy after login

CSS Style

Next, we need to use CSS to control the style and animation effects of the image list. First, set the ul to relative positioning so that you can use absolute positioning to control the position of the li tag.

.slider ul {
  position: relative;
  overflow: hidden;
}

Copy after login

Then, set the li tags to absolute positioning and set the width and height of each li tag.

.slider ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

Copy after login

In this code, we also set the initial transparency of each li tag to 0, and set a transition effect to make the switching of images more natural.

Use CSS3 animation to create a picture carousel effect

After preparing the HTML structure and CSS style, we can start using CSS3 animation to create a picture carousel effect.

First, we need to set a different animation delay time for each li tag. This is to allow each picture to stay for a period of time before the animation effect starts, creating a visual carousel effect. The code is as follows:

.slider ul li:nth-child(1) {
  animation: bannermove 15s linear infinite 0s;
}

.slider ul li:nth-child(2) {
  animation: bannermove 15s linear infinite 5s;
}

.slider ul li:nth-child(3) {
  animation: bannermove 15s linear infinite 10s;
}

Copy after login

In the above code, we set an animation named "bannermove" for each li tag, set an animation time of 15 seconds, use linear animation, infinite loop, and respectively Different delay times (0 seconds, 5 seconds, 10 seconds) are set to form a carousel effect.

Next, we need to create the animation effect itself. We will use @keyframes rules to define animations. The code is as follows:

@keyframes bannermove {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Copy after login

In the above code, we divide the animation into five stages. The initial 0% stage is completely transparent, gradually becoming opaque until it reaches the 4% stage, when the image is completely visible. Then, at the 24% stage, the image is still opaque and reaches a peak point. It then gradually becomes opaque until it is completely invisible at the 28% stage, then stops the animation at the 100% stage and becomes fully transparent again.

The complete code is as follows:

<html>
<head>
<style>

.slider {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slider ul {
  list-style-type: none;
  position: relative;
  overflow: hidden;
}

.slider ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;  
}

.slider ul li:nth-child(1) {
  animation: bannermove 15s linear infinite 0s;
}

.slider ul li:nth-child(2) {
  animation: bannermove 15s linear infinite 5s;
}

.slider ul li:nth-child(3) {
  animation: bannermove 15s linear infinite 10s;
}

@keyframes bannermove {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

</style>
</head>
<body>

<div class="slider">
  <ul>
    <li><img src="http://placekitten.com/400/400"></li>
    <li><img src="http://placekitten.com/g/400/400"></li>
    <li><img src="http://placekitten.com/400/400"></li>
  </ul>
</div>

</body>
</html>

Copy after login

The above is the entire content of using CSS3 to implement image carousel. We can adjust the image carousel style and animation effects as needed to achieve the best user experience.

The above is the detailed content of Examples of how to use CSS3 to achieve an image carousel effect. For more information, please follow other related articles on the PHP Chinese website!