美文网首页
43、逐帧动画

43、逐帧动画

作者: Elevens_regret | 来源:发表于2017-06-27 09:30 被阅读0次

    使用CSS动画中的steps()调速函数代替贝塞尔曲线的调速函数,可以实现动画在关键帧之间硬切换的效果。
    将一张loading的gif图的几个关键帧切出来组合成一张图片,将图片当做背景进行背景移动的动画,可以达到gif图的效果。


    .tip{
        background: url("loader.png") no-repeat;
        animation: 1s blink infinite steps(8); // 整个动画将只展现8个关键帧
    }
    @keyframes blink {
        to {
            background-position: -800px 0;
        }
    }
    

    相关文章

      网友评论

          本文标题:43、逐帧动画

          本文链接:https://www.haomeiwen.com/subject/sfbscxtx.html