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

谁践踏了优雅 2022-06-12 03:09 141阅读 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 条评论，141人围观）

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

相关阅读

相关 Vue多个元素的过渡

多个元素的过渡对于原生标签可以使用 `v-if/v-else` 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素： <transition>...

以你之姓@/ 2024年04月17日 05:30/ 0 赞/ 66 阅读

相关 transition:过渡

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关过渡 - transition

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

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

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

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

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

相关 CSS3过渡——transition

　　让CSS属性值在一定时间内平滑过渡 transition属性值 1.property 　　检索/设置对象中参与过渡的属性　　可设置none（不设置过渡）、

矫情吗；*/ 2021年10月19日 11:52/ 0 赞/ 414 阅读