用css3制作幻灯片效果

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW css3

作者：张海锋

撰写时间：2019/2/20

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

利用css3的动画效果做出来的类似于幻灯片的效果，

首先简单的在页面布局，如下：

<div id="fly-in"> 

       <div><span>非常</span>电影</div>

       <div>退去<span>远方</span></div>

       <div>永恒 <span>的循环</span></div>

       <div><span>只是 CSS</span> 和 HTML</div>

       <div><span>非常</span>电影</div>

       <div>退去<span>远方</span></div>

       <div>永恒 <span>的循环</span></div>

       <div><span>只是 CSS</span> 和 HTML</div>

      

</div>

接下来就是用css为其添加样式后，就利用css3的@keyframes语句添加动画效果：

#fly-in div:nth-child(2) { animation-delay: 4s}

#fly-in div:nth-child(3) { animation-delay: 8s}

#fly-in div:nth-child(4) { animation-delay: 12s}

#fly-in div:nth-child(5) { animation-delay: 16s}

#fly-in div:nth-child(6) { animation-delay: 20s}

#fly-in div:nth-child(7) { animation-delay: 24s}

#fly-in div:nth-child(8) { animation-delay: 28s}

 

@keyframes switch {

    0% { opacity: 0;filter: blur(20px); transform:scale(12)}

    3% { opacity: 1;filter: blur(0); transform:scale(1)}

    10% { opacity: 1;filter: blur(0); transform:scale(.9)}

    13% { opacity: 0;filter: blur(10px); transform:scale(.1)}

    80% { opacity: 0}

    100% { opacity: 0}

}

效果图：（因为是动画是动画播放的形式，所以图片看的效果不是很好）