css 几张图片点击向左移动

CSS 是一种用于网页设计的样式表语言，它可以为网页添加各种样式和布局效果。其中包括通过点击图片使其向左移动的效果，下面我们来看看如何实现。

    html>
        head>
            style>
            .image-container {
                    display: flex;
                    overflow-x: hidden;
            }
            .image-container img {
                    margin-right: 10px;
                    transition: transform 0.5s ease;
            }
            .image-container img:hover {
                    transform: translateX(-100%);
            }
            /style>
        /head>
        body>
            div class="image-container">
                img src="image1.jpg" alt="Image 1">
                img src="image2.jpg" alt="Image 2">
                img src="image3.jpg" alt="Image 3">
            /div>
        /body>
        /html>
    

上述代码中，我们使用了 flex 布局，并将其容器的 overflow-x 属性设为 hidden，这样就可以隐藏容器的横向滚动条。接着，我们设定每张图片之间的边距为 10 像素，并为其添加了一个 CSS3 过渡效果 transform 0.5s ease。

最后，我们在图片的 :hover 状态下，使用了 CSS3 的 transform: translateX(-100%) 来将其向左移动。

这样一来，当鼠标放到图片上时，它就会像被吸附住一样向左移动，在鼠标离开图片时又会回到原来的位置。这样的效果可以让网页看起来更加生动有趣。

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