[分享]css3图片重叠动画

在网页设计中，动画效果的运用可以让页面更加生动活泼，增加用户的视觉体验。而一种较为炫酷的动画效果便是图片重叠的动画效果，本文介绍使用CSS3实现这种效果的方法。 / 创建两张重叠的图片 / 在...

在网页设计中，动画效果的运用可以让页面更加生动活泼，增加用户的视觉体验。而一种较为炫酷的动画效果便是图片重叠的动画效果，本文介绍使用CSS3实现这种效果的方法。

/* 创建两张重叠的图片 */
<div class="image-box">
    <img src="image1.jpg">
    <img src="image2.jpg">
</div> 

在CSS3中，通过animation动画和@keyframes动画帧可以实现动画效果。我们可以编写以下代码，让两张图片产生位移效果。

/* 动画效果代码 */
.image-box {
    position: relative;
}
.image-box img {
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes moveLeft {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(-100%);
    }
}
.image-box img:nth-child(1) {
    animation-name: moveLeft;
}
.image-box img:nth-child(2) {
    animation-name: moveLeft;
    animation-delay: 2.5s;
} 

在以上代码中，我们先设置了图片容器的position属性为relative。这样，后面的绝对定位元素将会相对于这个容器进行定位，便于我们进行重叠动画的实现。接着，我们设置了图片的绝对定位位置，使两张图片重叠在一起，并给它们设置了动画持续时间、缓动函数、循环次数。然后我们定义了名为moveLeft的动画帧，其中0%代表开始状态，100%代表结束状态，通过transform:translateX()实现向左的移动效果。在两张图片中，我们分别定义了不同的animation-delay属性值从而形成两张图片错落叠放、交替运动的效果。

以上便是使用CSS3实现图片重叠动画的方法，这种效果可以为网页增添一些互动性和视觉效果，使得网页更加吸引人。当然，通过更改animation-duration、animation-timing-function和@keyframes动画帧中的具体值，您可以产生各种不同的动画效果，有很大的空间和可能性进行创作和定制。