-
動畫的優(yōu)化
查看全部 -
let?$content?=document.querySelector('.content'); let?initNumber?=?0;for(let?i?=?0;i<?30;?++i)?{ ??let?lefts?=?(Math.floor(Math.random()*5+12)); ??let?delay?=?(Math.floor(Math.random()?*?50?+?2)); ??initNumber?+=?lefts; ??let?ele?=?document.createElement('div'); ??ele.className?=?'yudi'; ??ele.setAttribute("style",`left:${initNumber}%;?top:?${lefts}%;?animation-delay:?${delay/10}s`); ??console.log(ele);$content.append(ele); } 沒有使用jquery,原生實現(xiàn)的紅包雨查看全部 -
動畫屬性：
transition 真
animation 真
transform 假
①CSS3動畫包括transition和animation
②動畫常常和transform屬性常用
③注意，transform并不是動畫屬性，但是它在為我們動畫的實現(xiàn)做出了杰出的貢獻
2、動畫屬性
①transition是動畫屬性，主要負責過渡屬性的變化
查看全部 -
animation基礎(chǔ)和寫法
①動畫名稱（name）--@keyframes，與transition不同的是，animation需要自定義一個名稱②過渡時間（duration）延遲時間（delay）③時間函數(shù)（timing-function）④播放次數(shù)（iteration-count）⑤播放方向（direction），即是否輪流播放和反向播放⑥停止播放的狀態(tài)（fill-mode），⑦是否暫停（play-state）
⑤的屬性值：alternate：先正向后反向；reverse：反向播放
⑥的屬性值：forwards：以最后的狀態(tài)結(jié)束。（不可和infinite一起用）
⑦的屬性值：running：無限播放；paused：停止播放。該屬性要跟js結(jié)合
animation可以解決transition display：none bug
查看全部 -
貝塞爾函數(shù)的四個值可以理解為兩個控制點p1、p2的坐標。p0和p3的坐標已經(jīng)確定了
查看全部 -
transition有四個要素：①屬性名稱（property）②過渡時間（duration）③延遲時間（delay）④時間函數(shù)（timing-function）
寫的順序：①②④③
注意：屬性名稱是css已有的屬性的名稱，不是自定義的。比如transform、opacity
代碼：
<!--?index.html?--> <!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"> ????<meta?http-equiv="X-UA-Compatible"?content="ie=edge"> ????<title>Document</title> ????<link?rel="stylesheet"?href="transition.css"> </head> <body> ????<div?class="box?demo-1"> ????</div> </body> </html>
/*transition.css*/ .box{ ????width:?100px; ????height:?100px; ????background:?#000; } .demo-1{ ????transition:?transform?2s?linear; } .demo-1:hover{ ????transform:?rotate(45deg); }tips：1.display不能和transition一起使用。原因：transition是需要初始值的。而display:none時，它脫離了文檔流的，transition讀不到初始值。display:block時，雖然顯示出來了，但是transition讀的是瞬時值，依舊是空。所以display不要和transition一起使用
2.transition后面盡量不要跟all。原因：會造成大量的計算資源，會將寬高等等的屬性全看一遍，增加GPU的損耗，導致頁面卡頓
再舉一個栗子：利用屬性名為opacity實現(xiàn)漸入濺出效果http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-8.html
查看全部 -
dispiay不能和transition 一起使用
transition 后面不要跟all? all會導致瀏覽器大量資源? 導致畫面卡頓
查看全部 -
1、animation基礎(chǔ)和寫法（一）
? ? ①動畫名稱（name）--@keyframes
? ? ②過度時間（duration） 延遲時間（delay）
? ? ③時間函數(shù)（timing-function）
2、animation基礎(chǔ)和寫法（二）
? ? ①播放次數(shù)（iteration-count）
? ? ②播放方向（direction）即是否輪流播放和反向播放
? ? ③停止播放的狀態(tài)（fill-mode） ?? 是否暫停（play-state）
3、animation簡單運用
? ? ①animation適用場景
? ? ②animation解決transition display：none bug
? ? ③animation 跳動的元素
查看全部 -
1、transition基礎(chǔ)和寫法
①屬性名稱（property）
②過度時間（duration） 延遲時間（delay）
③時間函數(shù)（timing-function）
2、注意：
? ? ? ①display不能和transition一起使用
? ? ?? ②transition后面盡量不要跟all
? ? ?? ③常見閃動可以persp和backface-visibility
查看全部 -
1、學習CSS3動畫必備基礎(chǔ)
①CSS3新屬性和其他CSS3靜態(tài)屬性
②Chrome瀏覽器調(diào)試工具
③js基礎(chǔ)的API，例如屬性選擇、事件監(jiān)聽
查看全部 -
1、初學CSS3動畫
①CSS3動畫包括transition和animation
②動畫常常和transform屬性常用
③注意，transform并不是動畫屬性，但是它在為我們動畫的實現(xiàn)做出了杰出的貢獻
2、動畫屬性
①transition是動畫屬性，主要負責過渡屬性的變化
②animation是動畫屬性，他可以實現(xiàn)transition做不到的事情，animation可以直接加載動畫，transition需要一個觸發(fā)，需要js協(xié)助
③transform不是動畫屬性，它是一個靜態(tài)類，經(jīng)常和動畫類屬性搭配
3、CSS3動畫的發(fā)展（效果）兼容性
IE 10 2012-09-04
Chrome 4 2010-1-25 -webkit
FireFox 5 2011-1-25
4、CSS3動畫的發(fā)展（事件）兼容性
IE 10 2013-10-17
Chrome 4 2010-1-25
FireFox 5 2011-1-25
5、CSS3動畫的應用
①CSS3動畫做一些功能性的菜單按鈕
②宣傳用的輪播圖，各種頁面的效果的緩沖
③頁面間的切換過渡，網(wǎng)頁小游戲
查看全部 -
?1、學習CSS3動畫的意義
①開發(fā)周期短
②增加瀏覽頁面的趣味性?
③增加用戶視覺沖擊力
2、什么是動畫
①動畫片、漫畫、視頻、flash等等會動的畫面都是動畫
②顏色高度等屬性的變化（過渡）也是動畫
③CSS3對于動畫的實現(xiàn)有過度和幀動畫?
查看全部 -
好的查看全部
-
document.styleSheets? 獲取樣式表
style.insertRule? 往樣式表里面注入規(guī)則
查看全部 -
transition和animation為動畫屬性
查看全部
舉報