2018-05-17 css3简单动画 上下切换图片效果:

<div class="div">
<div class ="d1">                                                    图片上下滚动。
<img  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/jianshe.png">
</div>
<div class="d1">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/zhaoshang.png">
</div>
</div>

<style>.div{    height: 50px;    width: 100px;    border:1px solid red;    overflow: hidden;
}    .d1 img{        width:50px;        height:50px;        position: relative;        animation: myimg 5s infinite;
    }
    @keyframes myimg{
        0%{top: 0px;}
        50%{top: -50px;}
        100%{top: 0px;}
    }</style>

作者：啾咪啾咪啾
链接：https://www.jianshu.com/p/bf3c083a4559