css3-11 如何实现2D动画
生活随笔
收集整理的這篇文章主要介紹了
css3-11 如何实现2D动画
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
css3-11 如何實(shí)現(xiàn)2D動(dòng)畫
一、總結(jié)
一句話總結(jié)：就是transform屬性，屬性值為1.translate()??? 2.rotate()??? 3.scale()，而這是哪個(gè)屬性值是帶參數(shù)的。
?
1、transform：translate和相對(duì)定位relative的不同？
沒旋轉(zhuǎn)的時(shí)候是一模一樣，都是占據(jù)文檔流，然后移動(dòng)
但是，一旦旋轉(zhuǎn)，transform：translate是以圖片旋轉(zhuǎn)后為直接坐標(biāo)系來動(dòng)，
而相對(duì)定位relative還是以瀏覽器窗口做移動(dòng)的直角坐標(biāo)系
?
2、圖片旋轉(zhuǎn)后，關(guān)于圖片的位移操作的直接坐標(biāo)系還是瀏覽器窗口么？
不是
旋轉(zhuǎn)發(fā)生，圖片的坐標(biāo)軸不認(rèn)瀏覽器，只認(rèn)圖片的
?
3、如何實(shí)現(xiàn)圖片對(duì)角線移動(dòng)（或朝某個(gè)角度移動(dòng)）？
旋轉(zhuǎn)，然后移動(dòng)（translate）
?
4、動(dòng)畫的關(guān)鍵詞是什么，屬性值中的移動(dòng)和旋轉(zhuǎn)的關(guān)鍵詞又是什么？
transform
1.translate()
2.rotate()
3.scale()
?
5、如何實(shí)現(xiàn)元素的移動(dòng)或者旋轉(zhuǎn)？
2 transform:translate(300px,300px); 16 transform:rotate(20deg);?
6、如何讓超出div的圖片隱藏？
17 overflow:hidden;?
7、二維動(dòng)畫的屬性值（平移和旋轉(zhuǎn)）的移動(dòng)參數(shù)分別是什么？
用腦子想，而不是用腦子記
2 transform:translate(300px,300px); 16 transform:rotate(20deg);?
8、jquery中如何設(shè)置定時(shí)事件？
和在js一樣
setInterval一個(gè)參數(shù)是匿名函數(shù)，一個(gè)參數(shù)是時(shí)間
33 setInterval(function(){ 34 s+=v; 35 obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'}); 36 },10);?
?
二、如何實(shí)現(xiàn)2D動(dòng)畫
1、相關(guān)知識(shí)
2D樣式:1.translate()
2.rotate()
3.scale()
?
2、代碼
translate相對(duì)移動(dòng)
1 div{ 2 transform:translate(300px,300px); 3 }translate和rotate實(shí)現(xiàn)2D旋轉(zhuǎn)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 margin:0px; 10 } 11 12 div{ 13 width:256px; 14 height:256px; 15 background: #ccc; 16 transform:rotate(20deg); 17 overflow:hidden; 18 } 19 20 </style> 21 <script src='jquery.min.js'></script> 22 </head> 23 <body> 24 <div> 25 <img src="dog.png" alt=""> 26 </div> 27 </body> 28 <script> 29 $('div').click(function(){ 30 s=0; 31 v=10; 32 obj=$(this); 33 setInterval(function(){ 34 s+=v; 35 obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'}); 36 },10); 37 }); 38 </script> 39 </html>rotate實(shí)現(xiàn)2D自動(dòng)旋轉(zhuǎn)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 margin:0px; 10 } 11 12 div{ 13 width:256px; 14 height:256px; 15 background: #ccc; 16 overflow:hidden; 17 border-radius:256px; 18 } 19 20 </style> 21 <script src='jquery.min.js'></script> 22 </head> 23 <body> 24 <div> 25 <img src="dog.png" alt=""> 26 </div> 27 </body> 28 <script> 29 $('div').click(function(){ 30 s=0; 31 v=-10; 32 obj=$(this); 33 setInterval(function(){ 34 s+=v; 35 obj.css({'transform':'rotate('+s+'deg)'}); 36 },10); 37 }); 38 </script> 39 </html>?
?
超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生總結(jié)
以上是生活随笔為你收集整理的css3-11 如何实现2D动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大归因+小归因，先崛网络帮你还原SEM的
- 下一篇： Heartbeat VIP/IP 与 别