css3-12 transition+css或transform实现过渡动画
生活随笔
收集整理的這篇文章主要介紹了
css3-12 transition+css或transform实现过渡动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css3-12 transition+css或transform實現過渡動畫
一、總結
一句話總結：首先要設置hover后的效果，然后在transition里面指定執行哪些樣式和執行時間為多長。
?
1、哪些樣式可以設置過渡動畫？
transform加別的css
11 transition: width 2s, height 2s, transform 2s;?
2、如何設置為hover里面的所有樣式都執行過渡動畫？
?transition: all 1s ease 0s;
?
3、過渡動畫如何實現？
首先要設置hover后的效果，然后在transition里面指定執行哪些樣式和執行時間為多長。
1 div{ 2 width:256px; 3 height:256px; 4 border:2px solid #999; 5 overflow:hidden; 6 transition:transform 2s; 7 } 8 9 div:hover{ 10 transform:rotate(360deg); 11 }?
?
二、transition+css或transform實現過渡動畫
1、相關知識
不僅transform可以，其它css也可以
?
2、代碼
1 div{ 2 width:256px; 3 height:256px; 4 border:2px solid #999; 5 overflow:hidden; 6 transition:transform 2s; 7 } 8 9 div:hover{ 10 transform:rotate(360deg); 11 }?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鳥教程(runoob.com)</title> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 background: red; 11 transition: width 2s, height 2s, transform 2s; 12 } 13 14 div:hover { 15 width: 200px; 16 height: 200px; 17 transform: rotate(180deg); 18 } 19 </style> 20 </head> 21 <body> 22 <p><b>注意：</b>該實例無法在 Internet Explorer 9 及更早 IE 版本上工作。</p> 23 24 <div>鼠標移動到 div 元素上，查看過渡效果。</div> 25 </body> 26 </html>?
?
?
?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/9268776.html
總結
以上是生活随笔為你收集整理的css3-12 transition+css或transform实现过渡动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JVM用户自定义加载器实现步骤
- 下一篇： 快速搭建一个端对端加密的在线聊天室