本文共 2411 字，大约阅读时间需要 8 分钟。

2D转换与CSS3动画教程

1. 2D转换

1.1 二维坐标系

在二维设计和开发中，理解二维坐标系是基础操作。通常情况下，一个二维坐标系由X轴和Y轴组成，其中X轴通常定义为水平方向，Y轴定义为垂直方向。

1.2 2D转换之移动（translate）

在CSS中，translate()方法可以用来在页面上移动元素的位置。该方法接受两个参数，分别对应X轴和Y轴的移动量。

• 单独移动X轴：transform: translateX(100px);
• 单独移动Y轴：transform: translateY(100px);
• 同时移动X轴和Y轴：transform: translate(100px, 100px);

1.3 2D转换之缩放（scale）

scale()方法用于对元素进行缩放。缩放可以通过指定一个倍率来实现，倍率为1表示不变，倍率小于1表示缩小，倍率大于1表示放大。

• 完全放大两倍：transform: scale(2);
• 不同方向缩放：transform: scale(2, 1);
• 缩小为原来的一半：transform: scale(0.5);

1.4 2D转换综合写法

在实际应用中，常常需要对元素进行多个转换操作。这种情况下，可以通过在transform属性中指定多个转换名称来实现。

示例：

transform: translate(150px, 50px) rotate(180deg) scale(1.2);

2. CSS3动画

2.1 动画的基本概念

CSS3引入了动画功能，允许开发者通过定义多个关键帧，精确控制元素的动画效果。动画可以用于创建滑动效果、旋转动画、缩放变换等。

2.2 动画的基本使用

使用CSS3动画的步骤如下：

2.3 动画的语法格式（定义动画）

@keyframes 动画名称 {  0% {    // 初始状态  }  100% {    // 最终状态  }}

2.4 动画的语法格式（使用动画）

div {  animation-name: 动画名称;  animation-duration: 持续时间;}

2.5 动画的序列

动画序列由0%到100%的变化构成，每个百分比对应一个状态变化。可以使用from和to来替代百分比。

2.6 动画代码演示

@keyframes move {  0% {    transform: translate(0, 0);  }  25% {    transform: translate(1000px, 0);  }  50% {    transform: translate(1000px, 500px);  }  75% {    transform: translate(0, 500px);  }  100% {    transform: translate(0, 0);  }}div {  width: 100px;  height: 100px;  background-color: pink;  animation-name: move;  animation-duration: 10s;}

2.7 动画的常见属性

• animation-name：指定动画名称
• animation-duration：动画持续时间
• animation-timing-function：动画速度曲线
• animation-delay：动画开始延迟
• animation-iteration-count：动画播放次数
• animation-direction：动画方向
• animation-fill-mode：动画结束状态

2.8 动画的简写方式

animation: move 2s linear 0s infinite alternate forwards;

2.9 热点案例

div {  overflow: hidden;  width: 200px;  height: 200px;  background-color: pink;  animation: bear 0.4s steps(8) infinite;}@keyframes bear {  0% {    background-position: 0 0;  }  100% {    background-position: -1600px 0;  }}

2.10 动画的速度曲线

div {  overflow: hidden;  width: 0;  height: 30px;  background-color: pink;  white-space: nowrap;  animation: w 4s steps(10) forwards;}@keyframes w {  0% {    width: 0;  }  100% {    width: 200px;  }}

2.11 动画的综合应用

div {  position: absolute;  width: 200px;  height: 100px;  background: url(bear.png) no-repeat;  animation: bear 0.4s steps(8) infinite, move 3s forwards;}@keyframes bear {  0% {    background-position: 0 0;  }  100% {    background-position: -1600px 0;  }}@keyframes move {  0% {    left: 0;  }  100% {    left: 50%;    transform: translateX(-50%);  }}

转载地址：http://gsql.baihongyu.com/