-
谷歌瀏覽器（以下兩種寫法都可以） .birdFly { /*寫法1*/ animation: bird-slow 400ms steps(3,start) infinite; /*寫法2*/ -webkit-animation-name: bird-slow; -webkit-animation-duration: 400ms; -webkit-animation-timing-function: steps(3); -webkit-animation-iteration-count: infinite; } /*???*/ @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} }查看全部
-
自適應查看全部
-
過去,當一個頁面完成加載時,初始化腳本的方法是使用load事件,但這個類函數的缺點是僅在所有資源都完全加載后才被觸發,這有時會導致比較嚴重的延遲,開發人員隨后創建了一種自定義事件,domready,它在DOM加載之后及資源加載之前被觸發. domready事件迅速被眾多JavaScript庫所采用,它開始在本地瀏覽器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被標準化,下面的代碼顯示了DOMContentLoaded是如何在document對象中被觸發的; document.addeventListener('DOMContentLoaded',function(){...},false); 值得注意的是,這個網站的行為層可以被更快速地啟動,這意味著用戶可以更快開始瀏覽網站,這對于連接速度慢的網絡或者包含大量圖片并需要一些時間加載圖片的網頁來說特別重要,如果只想在所有資源都完成加載之后運行腳本, 那么仍然可以使用load.查看全部
-
雪花 圣誕查看全部
-
<script type="text/javascript"> 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>查看全部
-
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';查看全部
-
rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復雜的層級關系，實現了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉化關系 16px = 1rem查看全部
-
$("button:last").click(function() { var audio = new Audio('http://www.xianlaiwan.cn/activity/project/project1/audio/happynewyear.mp3'); audio.play(); audio.addEventListener('ended', function() { audio.play(); }, false); })查看全部
-
rem是什么？ rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復雜的層級關系，實現了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉化關系 16px = 1rem查看全部
-
？查看全部
-
rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復雜的層級關系，實現了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉化關系 16px = 1rem查看全部
-
技術分解點 如何做rem布局 幀動畫的原理 如何營造3d效果 設計模式和異步代碼梳理 canvas繪圖 svg繪圖查看全部
-
記錄了查看全部
-
關鍵幀動畫原理： 假如，現在有一組由三張圖合成的雪碧圖，每張圖大小是91*71 如果實現3張圖幀動畫效果，代碼如下 animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} } 通過定義一個類，類中定義的動畫的一些關鍵數據，比如動畫名，時間，次數，切換的位置 通過keyframes定義動畫具體執行參數與時間段 steps(3)的意思就是：keyframes設置的0%-100%的段中，background-position的的x坐標會變化3次 steps會平分這些段落值，其變化值就是 background-position-x: -0px background-position-x: -91px background-position-x: -182px查看全部
-
自適應rem布局 rem是個低調的css單位，手淘在移動端的布局是基于rem處理的，當然還要基于viewport的處理，這里暫且不表。在我的上個七夕主題中采用的是流式布局( 使用 % 百分比定義寬度，高度大都是用px來固定住)。如果使用 em 或 rem 單位進行相對布局，相對 % 百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。 因為em是相對父級元素的原因 沒有得到推廣，圣誕主題采用rem布局單位 rem是什么？ rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復雜的層級關系，實現了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉化關系 16px = 1rem 自適應處理： 使用rem布局的時候,為了兼容不同的分辨率,我們應該要動態的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達到自適應的效果 參考右邊代碼區域，一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size，監聽瀏覽器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 給html設置fontSize大小，其實就是在DOMContentLoaded或者resize變化后調整fontSize的大小，從而調整rem的比值關系。慕課的布局是右邊區域展示，所以按照移動端的320寬度為標準去做適配的，當然基于這個縮放都是沒關系的 總結： 根據實際情況通過設計稿與當前可視區的大小做一個比例關系，通過這個比例進行縮放處理查看全部
舉報
0/150
提交
取消