Question

我正在研究一种解决方案，基本上是在创建简单横幅的同时，我希望在加载动画的同时添加一些动画。

所以基本上我想要实现的是：

有3张图像，一旦完成三张图像的加载，将一张一张地加载。我想隐藏该图像并显示一些随机文本几秒钟。这个完整的动画应该无限执行。

我已经编写了代码，但是现在它不能正常工作。

这是代码

<style>

div.img_320x50  {
  float: left;
  display: block;
-webkit-animation: fadein 2.5s infinite;
-moz-animation: fadein 2.5s infinite;
-o-animation: fadein 2.5s infinite;
animation: fadein 2.5s infinite;
  }
div.img_320x50:nth-child(1) {
  animation-delay: 1s;
  opacity:1;
}
div.img_320x50:nth-child(2) {
  animation-delay: 1.5s;
  opacity:1;
}
div.img_320x50:nth-child(3) {
  animation-delay: 2s;
  opacity:1;
}

@keyframes fadein {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    99% {
        display: block;
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}



</style>
<div style="width:320px; height:250px; margin:0; padding:0; background: -webkit-linear-gradient(top, rgb(8, 8, 10) 0%, rgb(38, 39, 44) 40%, rgb(38, 39, 44) 100%);
background: -o-linear-gradient(top, rgb(8, 8, 10) 0%, rgb(38, 39, 44) 40%, rgb(38, 39, 44) 100%);
background: -ms-linear-gradient(top, rgb(8, 8, 10) 0%, rgb(38, 39, 44) 40%, rgb(38, 39, 44) 100%);
background: -moz-linear-gradient(top, rgb(8, 8, 10) 0%, rgb(38, 39, 44) 40%, rgb(38, 39, 44) 100%);
background: linear-gradient(to bottom, rgb(8, 8, 10) 0%, rgb(38, 39, 44) 40%, rgb(38, 39, 44) 100%);
float:left;" >
    <div class="logo" style="margin-top:13px; width:320px; height:36px; text-align:center;float:left;">
        <img src="logo.jpg"/>
    </div>

    <div class="image-section" style="margin-top:13px; width:320px; margin-top:40px; clear:left; float:left;">
        <div class="320_50_image1 img_320x50 " style="float:left; left:10px; float:left; margin-left:30px;">
            <img src="image1.jpg" />
        </div>
        <div class="320_50_image2 img_320x50 " style="float:left; left:10px; float:left; margin-left:24px;">
            <img src="image2.jpg" />
        </div>
        <div class="320_50_image3 img_320x50 " style="float:left; left:10px; float:left; margin-left:24px;">
            <img src="image3.jpg" />
        </div>
    </div>

    <div class="install_btn" style="margin-top:15px; width:320px; height:27px; text-align:center;float:left;">
        <button style="width:80px;height:35px;background:#689f38;border-radius:5px;color:#fff;border-color: #689f38;font-size: 14px;font-weight: 200;font-family: verdana; border-style:solid;">
            Install
        </button>
    </div>

</div>

以下是jsfiddle链接：https://jsfiddle.net/c0Lmk43u/

如何使用CSS动画一张一张地加载图像？

0 个答案: