国厂精品一区二区三区,久久产精品一区二区三区

首頁免費課 H5+JS+CSS3 實現圣誕情緣問答

H5+JS+CSS3 實現圣誕情緣

                
                Aaron艾倫
            Web前端工程師

                    查看講師更多課程 
                    Aaron艾倫講師的其他課程
                
jQuery基礎(二)—DOM篇
入門·114001
免費課程
                                
H5+JS+CSS3實現七夕言情
中級·211515
免費課程
                                
jQuery基礎(四)—動畫篇
初級·85040
免費課程
                                
jQuery基礎(三)—事件篇
入門·89986
免費課程
                                
jQuery基礎 (一)—樣式篇
入門·217492
免費課程
                                
jQuery源碼解析（DOM與核心模塊）
高級·71429
免費課程
                                
                難度中級
            
                時長 2小時33分
            
                學習人數
            
綜合評分9.67
                            49人評價
                        查看評價
                                9.9
                                內容實用
                            
                                9.5
                                簡潔易懂
                            
                                9.6
                                邏輯清晰

全部評論問答未解決精華

TinMan

-moz-animation-name: bird-slow;
-moz-animation-duration: 400ms;
-moz-animation-timing-function: steps(3,start);
-moz-animation-iteration-count: infinite;

@keyframes bird-slow{
0%{background-position: -0px;}
100%{background-position: -300%;}}

0 3-3 自適應雪碧圖

2016-04-25

TinMan

然后上代碼：
.birdFly{
animation: bird-slow 400ms steps(3,start) infinite;
-moz-animation: bird-slow 400ms steps(3,start) infinite;}
@keyframes bird-slow {
0%{background-position: 0px 0px;}
100%{background-position: -273px 0px;}}

0 3-2 關鍵幀動畫

2016-04-25

TinMan

首先要說明的是原來的題目有兩個問題：
問題1：background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png); ← 這里少了一個分號導致無法執行。
問題2：實例寫法 0% {background-position-x: -0px} 這里的-x目的是為了標明后面px值代表X軸。但這個-x瀏覽器不支持。
所以換一種寫法0% {background-position: -0px 0px;} 注意這里加不加分號隨便，多個屬性時要加。

1 3-2 關鍵幀動畫

2016-04-25