css如何实现图片一张张滑动

CSS是前端开发者必备的技能之一，它可以实现丰富多彩的效果，比如图片一张张滑动。下面我们就来看看如何实现这个效果。

            /*HTML*/        div class="slide">
                img src="image1.jpg" alt="">
                img src="image2.jpg" alt="">
                img src="image3.jpg" alt="">
            /div>
        /*CSS*/        .slide {
                width: 500px;
                height: 300px;
                overflow: hidden;
                position: relative;
        }
        .slide img {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                -webkit-transition: opacity .6s ease-in-out;
                -moz-transition: opacity .6s ease-in-out;
                -o-transition: opacity .6s ease-in-out;
                transition: opacity .6s ease-in-out;
        }
        .slide img:first-child {
                opacity: 1;
        }
        .slide:hover img {
                opacity: .4;
        }
        .slide:hover img:hover {
                opacity: 1;
        }
        

首先我们在HTML中用div包裹了三张图片，然后在CSS中定义了.slide的样式。

我们将.slide设置为相对定位，这是为了使.slide中的图片可以使用绝对定位。我们设置了.slide的宽度为500像素，高度为300像素，并使用overflow:hidden来隐藏溢出的内容。

接下来，我们对.slide中的每张图片也做了样式定义。我们使用position:absolute来使图片脱离文档流，-webkit-transition和transition可以让图片的透明度（opacity）在.6秒内发生变化。

在.slide img:first-child样式中，我们将第一张图片的opacity设置为1，这样第一张图片就会默认显示。

然后，在.slide:hover img:nth-child(n+2)中，我们设置了除了第一张图片以外的所有图片的opacity为.4。这样鼠标移入时，第一张图片仍会显示，而其他图片变为半透明，呈现出“被遮挡”的效果。

最后，在.slide:hover img:hover中，当鼠标滑到任何一张图片上时，该张图片的opacity即被设置为1，实现了图片一张张地滑动的效果。

以上就是实现图片一张张滑动的CSS代码。学会这种效果后，相信你的页面一定会更加有趣了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！