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

谁践踏了优雅 2022-06-12 03:09 149阅读 0赞

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

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

变换前

![Center][]

变换后

![Center 1][]

[Center]: /images/20220612/637faf676ec5487c9b954cbd0e186a2b.png
[Center 1]: /images/20220612/84a1ddb5db754ca3b7ec1ca967c8bb9b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）

在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类：.fade-enter-acti...

ゝ一纸荒年。/ 2024年04月22日 22:30/ 0 赞/ 91 阅读

相关 transition:过渡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

墨蓝/ 2023年07月10日 08:47/ 0 赞/ 27 阅读

相关 transition,transform小应用，按钮hover效果背景过渡变换

1. 引子昨天在某招聘网站上看到一个按钮的背景过渡效果，本着学习的态度去琢磨了下transition的用法，下面是测试写的效果,当鼠标放在按钮上的时候,蓝色背景斜着从左

分手后的思念是犯贱/ 2023年06月16日 15:55/ 0 赞/ 10 阅读

相关 CSS3特效之转化（transform）和过渡（transition）

在对动画深入之前，我们需要先了解它的一些特性，CSS3的转化（transform）和过渡（transition）。有人可能会有疑问，CSS3动画不是只有anima

超、凢脫俗/ 2022年07月30日 13:13/ 0 赞/ 234 阅读

相关过渡元素transition的那些事儿

之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂 <!DOCTYPE h

偏执的太偏执、/ 2022年06月13日 07:58/ 0 赞/ 227 阅读

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

通过变换元素transform和过渡元素的混合使用，可以做出许多好看的动画效果。下面我们通过一个简单的例子来介绍一下。在看下面的例子之前，强烈建议看一下我的下面两个文章。过

谁践踏了优雅/ 2022年06月12日 03:09/ 0 赞/ 150 阅读

相关变换元素transform的那些事儿

老习惯，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

淡淡的烟草味﹌/ 2022年06月12日 03:08/ 0 赞/ 187 阅读

相关 VUE过渡（一)单元素过渡

VUE过渡（一)单元素过渡转载[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v

叁歲伎倆/ 2022年01月29日 13:19/ 0 赞/ 291 阅读

相关过渡 - transition

过渡 - `transition` 是变形`transfrom`其中一种效果，定义为一种状态过渡到另一种状态的过程，今天学习到css3动画，特此记录下过渡的使用和一些效果。

我会带着你远行/ 2022年01月12日 04:37/ 0 赞/ 290 阅读

相关【CSS3动画】过渡 transition、转换transform与动画animation

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ -------

àì夳堔傛蜴生んèń/ 2021年12月05日 01:17/ 0 赞/ 789 阅读