[分享]css3多个依次出现

在现代网站设计中，CSS3提供了很多有趣的动画效果，其中最重要的是多个元素依次出现。这个效果可以很容易地实现，使得网站更具视觉吸引力。 / 设置初始状态 / .box { opacity: 0; tr...

在现代网站设计中，CSS3提供了很多有趣的动画效果，其中最重要的是多个元素依次出现。这个效果可以很容易地实现，使得网站更具视觉吸引力。

 /* 设置初始状态 */
    .box {
        opacity: 0;
        transform: translateX(-50px);
    } 

首先我们需要设置元素的初始状态，即让它们在页面中不可见。我们可以使用opacity属性来设置透明度为0.设置元素的初始位置，也就是在X轴上向左移动50个像素，使用transform属性进行设置。

 /* 设置动画效果 */
    .box:nth-child(1) {
        animation: fadeIn 1s ease-out;
    }

    .box:nth-child(2) {
        animation: fadeIn 1s ease-out .3s;
    }
    
    .box:nth-child(3) {
        animation: fadeIn 1s ease-out .6s;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
    
        to {
            opacity: 1;
            transform: translateX(0);
        }
    } 

我们需要使用animation属性来为元素设置动画效果。这里我们使用了nth-child选择器，分别为每个元素设置动画。通过设置animation属性中的名称、时长、动画速度和延迟时间，确定多个元素出现的时间点。最后，在@keyframes中定义动画效果的from和to状态，使元素在动画过程中逐渐变得可见。

 /* HTML结构 */
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div> 

最后，我们将上述CSS样式应用到HTML结构中的多个元素中，使它们在页面中依次出现。这个效果可以让网站更加吸引人，是CSS3提供的一个非常有趣的动画效果。