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