CSS二合一课程: 过渡与变形

马黑黑 · 发表于 2021-12-27 12:10

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2021-12-27 12:25 编辑

之前我们介绍了CSS3的 @keyframes 动画，先来简单复习一下：

首先，需要构建一个动画过程，@keyframes+名称，如，@keyframes iChg，接着用 from ... to ... 或百分比来设定变化过程，然后在需要显示动画的选择器样式表代码中用 animation 引用变化并设定时长等属性，语句为动画名称+时长+其他属性，如 animation:iChg 2s infinite alternate（后两个属性表示循环变化、反方向变化）。最后在HTML代码中调用CSS选择器。看下面简单例子，以便更好地理解巩固：

<style type="text/css">
@keyframes iChg {
from { background:#fff; }
to { background:#000; }
/* 亦可用百分比来描述变化过程
%0 { background:#fff; }
100% { background:#000 }
*/
}
.myDiv {
margin:4px auto;
width:200px;
height:200px;
background:#fff;
border: 4px dashed #ffcccc;
animation:iChg 2s infinite alternate; /* 指定动画及变化时长、属性 */
}
</style>
<div class="myDiv"></div>

复制代码

接下来，简单学习CSS另外两个能产生动画效果的属性函数：变形（transform）和过渡（transition），这两个属性函数的基本应用也相对简单。

一、CSS变形 transform

transform的意思是变形、转换等，它提供很多方法参数，常用的有 rotate（旋转）、scale（扭曲）、translate（移动）、matrix（矩阵变形）。作为入门，本帖仅简单讨论旋转 rotate 和 translate 方法。

（一）旋转方法（rotate）

语法：transform:rotate(角度)

解释：首先告诉CSS我要变形，即 transform: ，然后指定变形方式为旋转，即 rotate(角度)，角度从 0 到 360 之间取值，支持负数值，单位为 deg ，看下面例子——

transform:rotate(45deg);

复制代码

上例是CSS语句，可以用 style 方式直接在HTML代码中使用：

<img alt="" src="图片" style="transform:rotate(-45deg);" />

复制代码

这样发出的图片将逆时针旋转45度。

（二）二维移动方法（translate）

语法：transform:tranlate(x,y)

解释：translate表示移动（二维），参数 x 是横坐标移动矢量值，y 表示纵坐标移动矢量值（y可以省略，缺省值为0）。

例子：transform:translate(300px,0px);

上面例子中，只设置了横向移动值，也可以用 translateX 方法：translateX(300px)；同样的，如果只需要纵向移动，可用 translateY 方法：translateY(100px)。

translate方法令被修饰对象产生移动，即对象会从原来的位置A移动到预设的位置B，但是，移动的过程无法看到，我们看到的只是结果。和 rotate 方法一样，要令其产生动画效果，需要触发机制。

当 transform 需要指定多个变形效果时，用空格将两个方法隔开而不是逗号，这个规范较为特殊：

transform:rotate(30deg) translateX(200px);

二、CSS过渡（transition）

transition是过渡变化，它指定某个HTML对象（如图片）从样式A过渡到样式B，可通过伪类触发变化过程。

简单语法：transition:属性时长

解释：“属性”参数值得是HTML对象的 width、height、color、border等属性，还可以是CSS变化属性（上面讨论的变形 transform 等；时长指一个周期变化的用时。

例子：

transition:height 2s;

复制代码

这将定义出这样一个过渡变化：改变对象高度，2秒内完成。如果需要加入其他属性的变化（如宽度），用逗号隔开：

transition:height 2s,width:2s;

复制代码

要触发过渡变化，需要在CSS中定义一个类选择器的伪类选择器：

<style type="text/css">
/* 自定义类选择器 */
.iDiv {
width:100px; /* 原始宽度 */
height:80px; /* 原始高度 */
background:#bbb;
transition:linear width 2s,height 2s; /* 长宽两个过渡变化 */
/* linear表示匀速变化，省略时缺省值为 ease */
}
/* 伪类选择器类选择器名称:hover */
.iDiv:hover {
width:800px; /* 变化的终极宽度 */
height:200px; /* 变化的终极高度 */
}
</style>

复制代码

最后写HTML标签代码：

<div class="iDiv"></div>

本帖的内容有点多，但只讨论了最简单也最基本的 transform 和 transition 的用法，它们还有很多复杂的参数留待以后需要时再逐一了解、学习。

马黑黑 · 发表于 2021-12-27 12:18

本帖最后由马黑黑于 2021-12-27 12:36 编辑

transform 变形的 rotate 旋转效果：

马黑黑 · 发表于 2021-12-27 12:28

鼠标指针移到下框查看 transition 过渡变化效果：

马黑黑 · 发表于 2021-12-27 12:41

三楼的效果是多个 rotate 组合而成，可以通过更改 deg 值、添加更多的图片或其他方式来生成更多的效果。参考代码：

<p> transform 变形的 rotate 旋转效果：<br> </p>
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(-30deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(30deg);">
</p>
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(-120deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(120deg);">
</p>

复制代码