亚洲大片av一区二区三区不卡,狠狠撩狠狠的爱天天啪,亚洲青色伊人Av综合

第1章效果預覽與介紹
視頻：1-1 課程簡介(03:16)

第2章設計思路與蘊涵的知識點
視頻：2-1 整體介紹(01:40)
視頻：2-2 編程思路(02:15)

第8章最終效果與總結
編程：8-1 最終效果與總結

元素運動實現

用關鍵幀可以實現精靈圖的切換，同時通過background-size解決了自適應的問題，這樣還是不夠的，元素還僅僅只是在原地進行幀動畫，要讓一個元素動起來必須要配合元素坐標的變化

因此在實現上，讓元素動起來：

運動 = 關鍵幀動畫 + 坐標變化

關鍵幀動畫我們已經實現了，那坐標的變化就很簡單了，一般來說前端能用到的手段

元素.position定位，修改top,left坐標修改
通過css3的transform屬性的translate

無論用那種需要記住的是元素的坐標都是 position+translate的值的總和

圣誕主題我采用的是transition+position的處理

transition是css3引入的"過渡"屬性，可以讓css的屬性值在一定的時間區間內平滑地過渡，考慮兼容性問題，這里會額外引入一個插件jquery.transit，這個就是具體封裝了transition的CSS3過渡動畫的實現

接下來代碼部分就非常簡單了

transition的使用與jQuery提供的animate()方法基本差不多，所以使用上很容易接受

參考右邊的代碼，讓飛鳥執行一個飛的動作，可以這樣用

$(".bird").transition({
    'right': "3rem",
}, 10000,'linear',function(){
    alert("結束")
});

只要給出position的坐標值，同時給出變化的時間就讓元素動起來了，結合一下精靈動畫，是不是看起來物體運動就是那么回事了？

具體的實現看右邊編輯區

任務

點擊運動按鈕，通過transition方法，讓"鳥"從右邊飛出來，飛出右邊3rem的位置，請在右邊對應的68行區域寫出對應的代碼來

?不會了怎么辦:     $(".bird").transition({
        'right': "3rem",
    }, 10000,'linear',function(){
        alert("結束")
    });

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣誕主題</title> <style type="text/css"> .bird { min-width: 4rem; min-height: 2rem; top: 10%; right: 0; position: absolute; z-index: 10; background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png); background-size: 300% 100%; } .birdFly { /*寫法1*/ -moz-animation-name: bird-slow; -moz-animation-duration: 400ms; -moz-animation-timing-function: steps(1,start); -moz-animation-iteration-count: infinite; /*寫法2*/ -webkit-animation:bird-slow 400ms steps(3) infinite; } @-webkit-keyframes bird-slow { 0% { background-position: -0% 0%; } 100% { background-position: -300% 0%; } } @-moz-keyframes bird-slow { 0% { background-position: -0% 0%; } 50% { background-position: -100% 0%; } 75% { background-position: -200% 0%; } 100% { background-position: -300% 0%; } } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script> </head> <body> <div class="bird birdFly"></div> <button>點擊運動</button> </body> <script type="text/javascript"> $("button").on("click",function(){ /** * 通過transition的方式改變運動 */ ？ }) var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設置根字體大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //綁定瀏覽器縮放與加載時間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

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

3-4 元素運動實現

元素運動實現

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

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

3-4 元素運動實現

熱搜

最近搜索清空

元素運動實現

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～