[分享]css做淡入淡出效果

CSS是一种用于网页设计的语言，可以使网页变得更加美观。其中，CSS可以实现淡入淡出效果，让网页更加动态，更具有吸引力。.fadeinout { opacity: 0; transition: opa...

CSS是一种用于网页设计的语言，可以使网页变得更加美观。其中，CSS可以实现淡入淡出效果，让网页更加动态，更具有吸引力。

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

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

以上代码实现了一个淡入淡出效果。首先，设置了元素的初始不透明度为0，即完全透明。然后，使用CSS3的过渡属性transition实现了透明度的变化效果，时间为1秒，加速度为先慢后快再慢。最后，在:hover伪类中将元素的透明度设置为1，即完全不透明。

这个效果可以用在很多地方，比如图片的展示、文字的渐变等等。而且，通过改变属性值和过渡时间，可以实现不同的淡入淡出效果。