CSS3三：（animation動畫-案例人物走路動畫）

阿新 • • 發佈：2018-12-08

CSS3 animation動畫

1、@keyframes 定義關鍵幀動畫 2、animation-name 動畫名稱 3、animation-duration 動畫時間 4、animation-timing-function 動畫曲線 linear(勻速)|ease(緩衝)|steps(步數) 5、animation-delay 動畫延遲 6、animation-iteration-count 動畫播放次數 n|infinite 7、animation-direction 動畫結束後是否反向還原 normal|alternate 8、animation-play-state 動畫狀態 paused(停止)|running(運動)

9、animation-fill-mode 動畫前後的狀態 none(預設)|forwards(結束時停留在最後一幀)|backwards(開始時停留在定義的開始幀)|both(前後都應用) 10、animation:name duration timing-function delay iteration-count direction;同時設定多個屬性

案例人物走路動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title 
>走路動畫</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img 
{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

CSS3三：（animation動畫-案例人物走路動畫）

CSS3 animation動畫

案例人物走路動畫

CSS3三：（animation動畫-案例人物走路動畫）

python3語言學習筆記（三：六類資料型別內建函式）

JS元件系列——表格元件神器：bootstrap table（三：終結篇，最後的乾貨福利）

1031：反向輸出一個三位數（水題系列但要小心）

CSS3特效：2D轉換&小案例

設置超時時間（項目案例僅供參考）

CSS3----vertical-align（文本垂直對齊方式）

登錄新版12306網站只需要三步（瀏覽器地址欄實現登錄）

text-stroke實現文字描邊（鏤空）、text-fill-color實現文字填充&漸變（+animation實現流光字體）

CentOSLinux 學習第三臺（2018年6月6日）

lavarel從零開始-第三彈（路由，控制器，視圖）

演算法導論第三課（fibonacci,二分查詢，歸併排序）

用 HPjtune 分析 GC 日誌（一個實際案例的診斷過程）

阻止事件默認行為（動作）：（兼容IE9以前版本寫法）

Python學習第三天（元組和檔案讀寫）

【觀點】有一種說法，演算法工程師的薪酬只有三檔（附大資料工程師技能圖譜）

神技！微信小程式（應用號）搶先入門教程（附最新案例DEMO-豆瓣電影）持續更新

高效能Mysql第三版（第五章建立高效能索引）

2018杭電多校第三場（2018 Multi-University Training Contest 3）

程式設計師之劍法三套-（原來程式設計師也是“劍客”）

CSS3三：（animation動畫-案例人物走路動畫）

CSS3 animation動畫

案例 人物走路動畫

相關推薦

案例人物走路動畫