-
不太懂查看全部
-
這是啥查看全部
-
技術(shù)點(diǎn)分解查看全部
-
新增內(nèi)容查看全部
-
主要采用查看全部
-
動(dòng)畫(huà)原理： 假如，現(xiàn)在有一組由三張圖合成的雪碧圖，每張圖大小是91*71 如果實(shí)現(xiàn)3張圖幀動(dòng)畫(huà)效果，代碼如下 animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} } 通過(guò)定義一個(gè)類，類中定義的動(dòng)畫(huà)的一些關(guān)鍵數(shù)據(jù)，比如動(dòng)畫(huà)名，時(shí)間，次數(shù)，切換的位置 通過(guò)keyframes定義動(dòng)畫(huà)具體執(zhí)行參數(shù)與時(shí)間段 steps(3)的意思就是：keyframes設(shè)置的0%-100%的段中，background-position的的x坐標(biāo)會(huì)變化3次 steps會(huì)平分這些段落值，其變化值就是 background-position-x: -0px background-position-x: -91px background-position-x: -182px查看全部
-
CSS3的Animation有八個(gè)屬性 animation-name ：動(dòng)畫(huà)名 animation-duration：時(shí)間 animation-delay：延時(shí) animation-iteration-count：次數(shù) animation-direction：方向 animation-play-state：控制 animation-fill-mode：狀態(tài) animation-timing-function：關(guān)鍵幀變化查看全部
-
.page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } <body> <section> <div class="page">rem跟著html:font-size變化</div> </section> </body> <script type="text/javascript"> var docEl = document.documentElement, //當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)。綁定此事件時(shí)， //注意現(xiàn)在當(dāng)瀏覽器不支持orientationChange事件的時(shí)候我們綁定了resize 事件。 //總來(lái)的來(lái)就是監(jiān)聽(tīng)當(dāng)然窗口的變化，一旦有變化就需要重新設(shè)置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設(shè)置根字體大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script>查看全部
-
看著好難查看全部
-
好查看全部
-
瀏覽器兼容問(wèn)題：-wobkit：谷歌；-moz：火狐； 如果3*3矩陣的圖片，只想顯示一張的話，需要把backtround-size:300%，300%； 想取其他圖片的話就通過(guò)百分比取圖； 火狐不支持background-size-x這個(gè)屬性；所以直接用background-size會(huì)比較好；查看全部
-
1：animation-name:動(dòng)畫(huà)名 2：animation-duration：時(shí)間 3：animation-delay:延時(shí) 4：animation-iteration-count：次數(shù) 5：animation-direction：方向 6：animation-play-state:控制 7：animation-fill-mode:狀態(tài) 8：animation-timing-function：關(guān)鍵幀變化 w3c上面有介紹 1——7； 第八個(gè)屬性：控制時(shí)間，用steps()函數(shù) 處理圖片的話。類似setTimeout的處理感覺(jué)查看全部
-
元素動(dòng)起來(lái)： 運(yùn)動(dòng) = 關(guān)鍵幀動(dòng)畫(huà) + 坐標(biāo)變化 坐標(biāo)變化： 元素.position定位，修改top,left坐標(biāo)修改 通過(guò)css3的transform屬性的translate 插件：jquery.transit查看全部
-
Animation有八個(gè)屬性 animation-name ：動(dòng)畫(huà)名 animation-duration：時(shí)間 animation-delay：延時(shí) animation-iteration-count：次數(shù) animation-direction：方向 animation-play-state：控制 animation-fill-mode：狀態(tài) animation-timing-function：關(guān)鍵幀變化查看全部
-
為了改成異步編程的流程問(wèn)題， jQuery 也引入了 Promise 的概念。 Promise 是一種令代碼異步行為更加優(yōu)雅的抽象，有了它，我們就可以像寫(xiě)同步代碼一樣去寫(xiě)異步代碼。這個(gè)東東看起來(lái)很復(fù)雜，實(shí)際上我們只要抓住核心的使用就可以查看全部
舉報(bào)
0/150
提交
取消