亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

CSS3動畫中的steps(),制作人物行走動畫

標簽:
Html/CSS CSS3

steps()是css3动画属性animation-timing-function的其中一个值,语法为:
steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
于是制作人物行走的动画有以下两种写法:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .animate {
                width: 88.83333333333333px;
                height: 54px;
                margin: 10px auto;
                overflow: hidden;
            }
            .animate img{
                width: 533px;
                height: 54px;
            }

            /**第一种和写法,动画分为6个阶段,每个阶段之前1步切换**/
            .animate01 img{
                -webkit-animation: animate01 1s steps(1)  infinite;
            }
            @-webkit-keyframes animate01 {
                0% {
                    transform: translateX(0);
                }
                16.7% {
                    transform: translateX(-90px);
                }
                33.4% {
                    transform: translateX(-180px);
                }
                50.1% {
                    transform: translateX(-270px);
                }
                67.8% {
                    transform: translateX(-360px);
                }
                84.5% {
                    transform: translateX(-450px);
                }
                100% {
                    transform: translateX(-533px);
                }
            }
                        /**第二种和写法,动画仅有1个阶段,但需要切换6步来完成,也就是说把每个阶段的计算过程交给css去做**/
            .animate02 img{
                -webkit-animation: animate02 1s steps(6, end)  infinite;
            }

            @-webkit-keyframes animate02 {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(-533px);
                }
            }
        </style>
    </head>

    <body>
        <div class="animate animate01">
               <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//598c230d0001657c05330054.png"/>
              </div>
        <div class="animate animate02">
                 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//598c230d0001657c05330054.png"/>
                </div>
    </body>

</html>
點擊查看更多內容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
4
獲贊與收藏
24

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消