css图片左到右渐入渐出 |css中控制按钮从左往右渐变

/*图片渐入渐出效果*/
.img {
position: relative;
}
.img img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.8s;
}
.img:hover img {
left: 100%;
opacity: 1;
}

上述代码为实现图片左到右渐入渐出效果的CSS样式。首先，将图片所在的容器设置为相对定位，再将图片设置为绝对定位并将位置属性left设为0，top设为0，opacity设为0，即图片完全透明，看不见。接着，使用transition属性将图片的变化效果设为0.8秒，即完成渐入渐出效果的时间。最后，使用:hover伪类选择器，当鼠标移动到图片所在容器上方时，图片的left属性设为100%，即图片从左到右完全显示，opacity设为1，即图片完全不透明，看得清楚。

这种渐入渐出效果可以为网站添加一份简洁、流畅的风格，并为用户提供更好的浏览体验。同时，也为前端开发者提供了更多的样式控制方式，使网站效果更加多样化、优美。