开发者社区> 问答> 正文

这张图的HTML小动画怎么完成?

image.png 就是竖着看,一列接着一列的让他动起来。 我只能完成一行或者一列动画,但是两列加起来就不行了。 只能用css

展开
收起
海边一只船 2020-05-27 15:36:21 623 0
1 条回答
写回答
取消 提交回答
  • HTML代码

    <div class="boxA"></div>
    

    css代码

    .boxA {
        width: 100px;
        height: 400px;
        background:url("https://img-ask.csdn.net/upload/202005/13/1589349016_808127.png") no-repeat;
        background-size: 600% 100%;
        -webkit-animation: bird-slow .5s steps(5) infinite;
        animation: bird-slow .5s steps(5) infinite;
    }
    
    @keyframes bird-slow {
        0% {
            background-position: 0% 0%;
        }
        100% {
            background-position: 100% 0%;
        }
    }
    @-webkit-keyframes bird-slow {
        0% {
            background-position: 0% 0%;
        }
        100% {
            background-position: 100% 0%;
        }
    }
    
    
    2020-05-27 16:47:25
    赞同 展开评论 打赏
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载