css3-11 如何实现2D动画
生活随笔
收集整理的這篇文章主要介紹了
css3-11 如何实现2D动画
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
css3-11 如何實現(xiàn)2D動畫
一、總結(jié)
一句話總結(jié)：就是transform屬性，屬性值為1.translate()??? 2.rotate()??? 3.scale()，而這是哪個屬性值是帶參數(shù)的。
?
1、transform：translate和相對定位relative的不同？
沒旋轉(zhuǎn)的時候是一模一樣，都是占據(jù)文檔流，然后移動
但是，一旦旋轉(zhuǎn)，transform：translate是以圖片旋轉(zhuǎn)后為直接坐標(biāo)系來動，
而相對定位relative還是以瀏覽器窗口做移動的直角坐標(biāo)系
?
2、圖片旋轉(zhuǎn)后，關(guān)于圖片的位移操作的直接坐標(biāo)系還是瀏覽器窗口么？
不是
旋轉(zhuǎn)發(fā)生，圖片的坐標(biāo)軸不認(rèn)瀏覽器，只認(rèn)圖片的
?
3、如何實現(xiàn)圖片對角線移動（或朝某個角度移動）？
旋轉(zhuǎn)，然后移動（translate）
?
4、動畫的關(guān)鍵詞是什么，屬性值中的移動和旋轉(zhuǎn)的關(guān)鍵詞又是什么？
transform
1.translate()
2.rotate()
3.scale()
?
5、如何實現(xiàn)元素的移動或者旋轉(zhuǎn)？
2 transform:translate(300px,300px); 16 transform:rotate(20deg);?
6、如何讓超出div的圖片隱藏？
17 overflow:hidden;?
7、二維動畫的屬性值（平移和旋轉(zhuǎn)）的移動參數(shù)分別是什么？
用腦子想，而不是用腦子記
2 transform:translate(300px,300px); 16 transform:rotate(20deg);?
8、jquery中如何設(shè)置定時事件？
和在js一樣
setInterval一個參數(shù)是匿名函數(shù)，一個參數(shù)是時間
33 setInterval(function(){ 34 s+=v; 35 obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'}); 36 },10);?
?
二、如何實現(xiàn)2D動畫
1、相關(guān)知識
2D樣式:1.translate()
2.rotate()
3.scale()
?
2、代碼
translate相對移動
1 div{ 2 transform:translate(300px,300px); 3 }translate和rotate實現(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實現(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 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>?
?
超強干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達旦的技術(shù)人生總結(jié)
以上是生活随笔為你收集整理的css3-11 如何实现2D动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大归因+小归因，先崛网络帮你还原SEM的
- 下一篇： Heartbeat VIP/IP 与 别