变换元素transform和过渡元素transition混合使用
生活随笔
收集整理的這篇文章主要介紹了
变换元素transform和过渡元素transition混合使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過變換元素transform和過渡元素的混合使用，可以做出許多好看的動畫效果。下面我們通過一個簡單的例子來介紹一下。在看下面的例子之前，強烈建議看一下我的下面兩個文章。
過渡元素transition的那些事兒 ?http://blog.csdn.net/m0_37568521/article/details/74091830
變換元素transform的那些事兒 ?http://blog.csdn.net/m0_37568521/article/details/75093512
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.pic{width: 400px;margin:80px auto;background: #d8effe;padding: 10px;}.pic img{margin:5px;padding: 5px;width: 135px;border:1px solid black;background: white;transition: all 1s;}.pic img:hover{transform: scale(2.2) rotate(20deg);}</style> </head> <body><div class="pic"><img src="one.jpg"><img src="two.jpg"><img src="three.jpg"><img src="four.jpg"><img src="five.jpg"></div> </body> </html>看過前面的兩篇文章，這個代碼肯定是非常容易理解的，就不過多的解釋。效果圖因為是動態的，我只能夠截取兩張圖片看看。
變換前
變換后
總結
以上是生活随笔為你收集整理的变换元素transform和过渡元素transition混合使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Flutter TextField输入文
- 下一篇： 单元素/组件的过渡