css图片切换代码不用js

今天要和大家分享一个有关CSS图片切换的代码。不过不同于常规的做法，我们不需要借助JavaScript，而是纯粹利用CSS完成这项任务。首先我们来看看需要替换的图片是如何布局的。在HTML中，我们需要用到一个div元素，然后把两张图片都放在这个div里。

    
    <div class="image-container">
        <img src="image1.jpg" class="active">
        <img src="image2.jpg">
    </div>

其中active类用来表示默认显示的图片。接下来，我们需要通过CSS来控制这两张图片的切换效果。具体实现方式如下：

css图片切换代码不用js

    
    .image-container {
        position: relative;
        width: 100%;
        height: auto;
    }

    .image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .image-container img.active {
        opacity: 1;
    }

    .image-container img:last-child {
        animation: image-animation 8s infinite;
        -webkit-animation: image-animation 8s infinite;
    }

    @keyframes image-animation {
        0% {
            opacity: 0;
        }
        8% {
            opacity: 1;
        }
        92% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    @-webkit-keyframes image-animation {
        0% {
            opacity: 0;
        }
        8% {
            opacity: 1;
        }
        92% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

如上代码中，我们首先将整个div设为relative定位，然后将其中的图片设置为absolute定位，并且它们重合在一起，因为它们的top和left都是0。我们用opacity控制图片透明度，然后定义了一个0.5秒的过渡效果。当active类被加到了某一张图片上时，它的opacity就会变成1，从而显示出来。要实现图片的切换，我们给最后一张图片加上了一个animation动画，这个动画会不停地重复进行。它的执行时间是8秒，并且定义了一个keyframe，控制了不同时间点的图片透明度。这样，就能实现两张图片之间的切换了。这就是CSS图片切换的整个实现过程。相信通过这篇文章的分享，以及上面的代码，大家可以掌握这项技能了。

css图片切换代码 不用js

相关文章

css图片切换代码不用js