[分享]css3图片淡入淡出

CSS3中提供了多种处理图片淡入淡出效果的方法。其中最常用的两种方式是：使用transition属性和使用animation属性。使用transition属性实现图片淡入淡出效果：img { opac...

CSS3中提供了多种处理图片淡入淡出效果的方法。其中最常用的两种方式是：使用transition属性和使用animation属性。

使用transition属性实现图片淡入淡出效果：

img {
    opacity: 1; /*设置最初的不透明度*/
    transition: opacity 1s; /*设置变化时长和属性*/
}

img:hover {
    opacity: 0; /*设置变化后的不透明度*/
} 

以上代码表示当鼠标悬浮在img标签上时，图片的不透明度会从1变成0，即从可见变成不可见。这个过程会在1秒钟内完成。

使用animation属性实现图片淡入淡出效果：

img {
    opacity: 0; /*设置最初的不透明度*/
    animation: fadeInOut 2s ease-in-out infinite; /*设置动画属性*/
}

@keyframes fadeInOut {
    50% {
        opacity: 1; /*在动画时间的中间部分设置不透明度为1*/
    }
} 

以上代码表示img标签的不透明度在2秒钟内从0变成1再变回0，这个过程不停地重复。其中，@keyframes定义了动画效果的具体流程，50%表示动画时间的一半时刻，即此时不透明度为1。

以上两种方法可以根据需要进行自定义调整，比如更改变化时长、变化曲线等等，实现不同的图片淡入淡出效果。