【Web前端开发基础】CSS3之空间转换和动画-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Web前端开发基础】CSS3之空间转换和动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS3之空间转换和动画

一、空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

1.1 概述

空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
空间转换也叫3D转换
属性：transform
2D转换能够改变元素X轴和Y轴方向特性，3D转换还能改变Z轴方向特性，并且可以通过视角设置透视关系，使元素具有透视效果

1.2 3D转换常用的属性

【Web前端开发基础】CSS3之空间转换和动画,前端,css3,css,html5

1.3 3D转换：translate3d（位移）

目标：使用translate实现元素空间位移效果

语法
- transform: translate3d(x, y, z);
- transform: translateX(x);
- transform: translateY(y);
- transform: translateZ(z);
取值（正负即可）：① 数字+px ② 百分比
注意点：x，y，z是不能够省略的，如果没有就写0

1.4 3D转换：perspective（视角）

目标：使用perspective属性实现透视效果

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
- 答：近大远小、近清楚远模糊
思考：默认情况下，为什么无法观察到Z轴位移效果？
- 答：Z轴是视线方向，移动效果是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
属性（添加给父级）
- perspective: 值;
- 取值：像素单位数值，数值一般在800 – 1200
作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果

1.5 3D转换：rotate3d（旋转）

目标：使用rotate实现元素空间旋转效果

语法
- transform: rotate3d(x, y, z, angle);
- transform: rotateX(x);
- transform: rotateY(y);
- transform: rotateZ(z);
注意点：
- rotate3d(x, y, z, angle) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字
左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

1.6 3D转换：transform-style: preserve-3d（立体呈现）

目标：使用transform-style: preserve-3d呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？
- 答：不能，perspective只增加近大远小、近实远虚的视觉效果
实现方法
- 添加transform-style: preserve-3d;
- 使子元素处于真正的3d空间
transform-style取值
- preserve-3d ：设置3D转换
- flat ：默认值
呈现立体图形步骤
1. 盒子父元素添加transform-style: preserve-3d;
2. 按需求设置子盒子的位置（位移或旋转）
注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

1.7 3D转换：scale3d（缩放）

目标：使用scale实现空间缩放效果

语法
- transform: scale3d(x, y, z)
- transform: scaleX(x)
- transform: scaleY(y)
- transform: scaleZ(z)

1.7 3D导航案例

目标：使用立体呈现技巧实现3D导航效果

实现思路：
1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
  - li标签
    - 添加立体呈现属性transform-style: preserve-3d;
    - 添加旋转属性（为了便于观察效果，案例完成后删除即可）
  - a标签
    - 调节a标签的位置
      - a标签定位（子绝父相）
      - 英文部分添加旋转和位移样式
      - 中文部分添加位移样式
2. 添加hover状态旋转切换效果
  - 鼠标滑过li，添加空间旋转样式
  - li添加过渡属性
3. 注意：案例完成后，删除li的旋转样式

二、动画

目标：使用animation添加动画效果

2.1 动画介绍

动画是CSS3中具有颠覆性的特征之一，有通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧

2.2 动画的基本使用

制作动画分为两步：
1. 先定义动画
2. 再使用（调用）动画
动画的序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
- 在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是元素从一种样式逐渐变化为另外一种样式的效果。你可以改变任意多的样式任意多的次数
- 请使用百分比来规定变化发生的时间，或者关键词 from 和 to ，等同于 0% 和 100%

使用 @keyframes 定义动画（类似定义类选择器）

/* 定义动画 */

/* ① 百分比 */
@keyframes 动画名 {
    0% {
        初始状态样式
    }
    100% {
        动画结束时样式
    }
}

/* 关键字 */
@keyframes 动画名 {
    from {
        初始状态样式
    }
    to {
        动画结束时样式
    }
}

元素使用动画

/* 使用(调用动画) */
	使用动画的元素 {
	/* 调用动画 */
	animation-name: 动画名称;
	/* 持续时间 */
	animation-duration: 持续时间;
}

快速体验
定义并使用动画

/* 需求：我们打开页面，盒子就从左边走到右边 */
/* 第1种：百分比 */
/* 1.定义动画 */
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(1000px, 0);
  }
}
/* 第2种：关键字 */
/* 1.定义动画 */
/* from 和 to 等价于 0% 和 100% */
@keyframes move {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(1000px, 0);
  }
}
div {
  width: 200px;
  height: 200px;
  background-color: pink;
  /* 2.调用动画 */
  /* 动画名称 */
  animation-name: move;
  /* 动画持续时间 */
  animation-duration: 2s;
}

动画序列里的百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>Document</title>
    <style>
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframes 关键帧*/
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间的划分 eg: 6s * 25% = 1.25s*/
        @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: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画，直接使用名字调用 */
            animation-name: move;
            /* 设置动画持续时间 */
            animation-duration: 6s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画的连写
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

2.3 动画的常用属性

【Web前端开发基础】CSS3之空间转换和动画,前端,css3,css,html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称（必备属性） */
            animation-name: move;
            /* 持续时间（必备属性）*/
            animation-duration: 2s;
            /* 动画运动速度曲线 */
            animation-timing-function: ease;
            /* 动画何时开始 */
            animation-delay: 1s;
            /* 重复次数 iteration 重复的 count 次数 infinite 无限 */
            animation-iteration-count: infinite;
            /* 是否反方向播放 默认是normal 若需要逆向播放，则使用alternate*/
            animation-direction: alternate;
            /* 动画结束状态 默认是backwards 回到起始状态，我们也可以让他停留在结束状态
forwards */
            animation-fill-mode: forwards;
        }

        div:hover {
            /* 动画播放状态 */
            /* 鼠标经过 div, 让这个 div 的动画停止，鼠标离开 div 就继续播放动画 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.4 逐帧动画

目标：使用steps实现逐帧动画

属性： animation-timing-function
取值： steps(数字)：逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果
animation-timing-function: steps(N); 将动画过程等分成N份
精灵动画制作步骤
- 准备显示区域
  - 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
- 定义动画
  - 改变背景图的位置（移动的距离就是精灵图的宽度）
- 使用动画
  - 添加速度曲线steps(N)，N与精灵图上小图个数相同
  - 添加无限重复效果
多组动画文章来源地址https://www.toymoban.com/news/detail-823120.html
- 思考：如果想让小人跑远一些，该如何实现？
- 答：精灵动画的同时添加盒子位移动画

/* 样式代码 */
.box {
  width: 140px;
  height: 140px;
  background: url("./images/jlbg.png") no-repeat 0 0;
  animation: run 1s steps(12) 3, move 3s linear forwards;
}
@keyframes run {
  /* 动画的开始状态和原来的默认样式相同时，可以省略开始状态的代码 */
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1680px 0;
  }
}
@keyframes move {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(1000px);
  }
}

<!-- 结构代码 -->
<div class="box"></div>

到了这里，关于【Web前端开发基础】CSS3之空间转换和动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

【Web前端开发基础】CSS3之空间转换和动画