background-position和animation制作逐帧动画

利用background-position和animation制作逐帧动画,成品如下:

1586176-20190119171848685-2134186995.gif

html里面只要写一个元素就够了,动画我们把图片添加成背景做,再让背景在元素内移动。我用了一个整合图片,7个片段

*{margin:0;padding:0;}
    section{
        width: 180px;
        height: 300px;
        background: url(images/charector.png) no-repeat;
        margin: 50px auto;
        border: 2px solid red;
        animation:run 1s infinite step-start;
    }

加关键帧。因为有7个片段,我添加了八个状态。注意,100%状态那里不能在84%的基础上再递增。因为那样就不能做成循环奔跑的效果了,你得让它在100%的时候的状态跟0%时候一样,这样才首尾算接上了。最后在前面的样式那里加上animation

    @keyframes run{
        0%{background-position: 0 0;}
        14%{background-position: -180px 0;}
        28%{background-position: -360px 0;}
        42%{background-position: -540px 0;}
        56%{background-position: -720px 0;}
        70%{background-position: -900px 0;}
        84%{background-position: -1080px 0;}
        100%{background-position: 0 0;}
    }

转载于:https://www.cnblogs.com/web-learning/p/10292346.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值