欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

变换元素transform和过渡元素transition混合使用

发布时间：2023/12/16 45 豆豆
生活随笔 收集整理的这篇文章主要介绍了 变换元素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混合使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。