[分享]css两张图片交替动画

在网页设计中，动画效果能够增强用户体验及视觉性，而使用CSS创建动画是一种实现动画效果的方式。本文将介绍如何使用CSS使两张图片交替动画。/ CSS代码 / animation { width: 50...

在网页设计中，动画效果能够增强用户体验及视觉性，而使用CSS创建动画是一种实现动画效果的方式。本文将介绍如何使用CSS使两张图片交替动画。

/** CSS代码 **/
#animation {
    width: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#animation img {
    position: absolute;
    top: 0;
}

#animation img:nth-child(2) {
    opacity: 0;
    animation: fadeinout 5s ease-in-out infinite;
}

#animation img:nth-child(1) {
    animation: fadeinout 5s ease-in-out 5s infinite;
}

@keyframes fadeinout {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
} 

首先，我们创建一个容器div，并设置其宽度为500px、水平居中对齐、相对定位和溢出隐藏。图片为绝对定位，顶部对齐。

我们有两张图片，并设置img:nth-child(2)透明度为0，调用“fadeinout”动画，用于使第二张图片消失和出现；img:nth-child(1)调用“fadeinout”动画，用于使第一张图片消失和出现，开头后延迟5秒。

在动画部分，我们创建这样一个“fadeinout”动画，其中0%的透明度为0，50%的透明度为1，100%的透明度再次变为0。动画会在5秒内完成，并且轮流重复。

最后，您可以在HTML代码中添加如下内容以观察效果：

<div id="animation">
    <img src="image1.jpg">
    <img src="image2.jpg">
</div> 

由于两个图片交替出现和消失，所以会产生美妙的视觉效果，增强页面的视觉吸引力。此外，由于该实现不需要JavaScript，所以可以大大降低网站的加载时间与数据传输量，提高网站性能。