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

来源：互联网发布：辽宁北方广电网络编辑：程序博客网时间：2024/06/05 15:55

通过变换元素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>

看过前面的两篇文章，这个代码肯定是非常容易理解的，就不过多的解释。效果图因为是动态的，我只能够截取两张图片看看。

变换前

变换后

阅读全文

0 0