Tips and methods for achieving fade-in and fade-out picture effects with CSS

Tips and methods of CSS to achieve fade-in and fade-out picture effects

In web design, the display of pictures is a very important part. In order to improve the user experience, we often use some dynamic effects to increase the attractiveness of the page. Among them, the fade effect is a common and elegant animation effect that can make the page appear smooth and dynamic. This article will introduce the techniques and methods of using CSS to achieve fade-in and fade-out image effects, and provide specific code examples for reference.

1. Use the opacity property of CSS to achieve the fade-in and fade-out effect
The opacity property of CSS can control the transparency of the element. The value range is from 0 to 1, 0 means completely transparent, and 1 means completely opaque. By using changes in transparency, the fade-in and fade-out effect of the image can be achieved.
We can define a CSS class, such as fade-in-out, and set animation effects in it. The following is a sample code:

.fade-in-out {
  opacity: 0;
  animation: fadeInOut 3s infinite;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

In the above code, the initial value of the opacity attribute of the fade-in-out class is 0, which means that the image is completely transparent by default. Then an animation named fadeInOut is defined. The total time of the animation is 3 seconds and is set to infinite loop. In the animation, by changing the transparency value, the picture starts with a transparency of 0, to 1, and then to 0, completing a fade-in and fade-out process.

In HTML, we only need to apply the fade-in-out class to the image that needs to achieve the fade-in and fade-out effect. The following is a sample code:

<img class="fade-in-out lazy"  src="/static/imghw/default1.png"  data-src="example.jpg"  alt="example">

2. Use the transition attribute of CSS to achieve the fade-in and fade-out effect
In addition to using the opacity attribute, we can also use the transition attribute of CSS to achieve the fade-in and fade-out effect. The transition attribute can control the transition effect of element attributes, and the animation effect can be achieved by specifying the attribute name and transition time.
The following is a sample code that uses the transition attribute to achieve the fade-in and fade-out effect:

.fade-in-out {
  opacity: 0;
  transition: opacity 1s;
}

.fade-in-out:hover {
  opacity: 1;
}

In the above code, the initial value of the opacity attribute of the fade-in-out class is 0, and a transition time is defined as 1 second transition effect. When the mouse hovers over an element of the fade-in-out class, its opacity attribute value will change to 1, thereby achieving the fade-in effect.

In HTML, we only need to apply the fade-in-out class to the image that needs to achieve the fade-in and fade-out effect. The following is a sample code:

<img class="fade-in-out lazy"  src="/static/imghw/default1.png"  data-src="example.jpg"  alt="example">

The above are two common methods of using CSS to achieve fade-in and fade-out image effects, using the opacity attribute and the transition attribute respectively. By comparing these two methods, you can choose the appropriate method to achieve the fade-in and fade-out effect according to actual needs. No matter which method is used, the picture display can be made more vivid and the user experience can be improved.

Summary
In web design, the fade effect is a common animation effect that can enhance the attractiveness of the page. By using the opacity property or transition property of CSS, we can achieve the fade-in and fade-out image effect. This article introduces the implementation of these two methods through specific code examples, hoping to be helpful to everyone's actual development.

The above is the detailed content of Tips and methods for achieving fade-in and fade-out picture effects with CSS. For more information, please follow other related articles on the PHP Chinese website!