变换元素transform和过渡元素transition混合使用
生活随笔
收集整理的這篇文章主要介紹了
变换元素transform和过渡元素transition混合使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
通過(guò)變換元素transform和過(guò)渡元素的混合使用，可以做出許多好看的動(dòng)畫(huà)效果。下面我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)介紹一下。在看下面的例子之前，強(qiáng)烈建議看一下我的下面兩個(gè)文章。
過(guò)渡元素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>看過(guò)前面的兩篇文章，這個(gè)代碼肯定是非常容易理解的，就不過(guò)多的解釋。效果圖因?yàn)槭莿?dòng)態(tài)的，我只能夠截取兩張圖片看看。
變換前
變換后
總結(jié)
以上是生活随笔為你收集整理的变换元素transform和过渡元素transition混合使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Flutter TextField输入文
- 下一篇： 单元素/组件的过渡