CSS进阶之形变与动画 (一)：transform、垂直居中总结、transition动画、animation动画、vertical-align

跳转目录🚀

篇章	知识点
CSS进阶之形变与动画 (一)	transform、垂直居中总结、transition动画、animation动画、vertical-align
CSS进阶之预处理语言之less (二)	Easy less插件、认识less、注释、计算方式、嵌套、变量的定义导入less文件、从less导出css样式的路径
CSS进阶之grid网格布局 (三)	关于grid布局、grid-container属性、grid-items属性
CSS进阶之移动端适配 (四)	媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案
CSS进阶之额外内容补充 (五)	HTML5新增、CSS函数补充、BFC详解

1. CSS属性 - transform 形变

1.1 认识transform

• 作用： 允许你旋转，缩放，倾斜或平移给定元素
• 特别注意： ：并非所有的盒子都可以进行transform的转换(通常行内级元素不能进行形变)
  • 所以，transform对行内级非替换元素是无效的，比如span、a和table中的一些元素等
    

1.2 transform的用法

• transform属性的语法：transform的值是写一个或多个形变函数或者关键词none的。
  
  最主要学习以下红框的几个函数
  
• 常见的函数transform function有：
  • 平移：translate(x,y)
  • 缩放：scale(x,y)
  • 旋转：rotate(deg)
  • 倾斜：skew(deg,deg)

1.3 形变函数 - translate(x,y) 位移

1.3.1 认识translate

• 作用： translate()这个函数用于移动元素在平面上的位置，并且是translateX和translateY函数的简写形式
• translate的取值：
  1. 一个值时：为translate(x)，表示设置x轴上的位移。
  2. 两个值时：为translate(x,y)，表示设置x轴与y轴上的位移。
• 函数的值类型：
  1. 数字： 100px
  2. 百分比： translate函数的值为百分比是相对于自身的；如果设置的x位移，那么参考的是自身的宽度；如果设置的y:;位移，那么参考的是自身的高度
• 案例练习：
  

.box {
      display: inline-block;
      border: 2px solid blue;
    }

    .content {
      width: 200px;
      height: 100px;
      background-color: orange;

      /* 百分比：你的百分比时相对于谁？ */
      /* 不同地方的百分比相对参照物是不一样 */

      /* translate的百分比时相对于自身的 */
      /* 如果设置的x位移，那么参考的是自身的宽度 */
      /* 如果设置的y:;位移，那么参考的是自身的高度 */
      transform: translate(100%, 100%);
    }

<div class="box">
    <div class="content"></div>
  </div>

1.3.2 translate的水平垂直居中方案

• 水平居中的方案
  1. 行内级元素：设置父元素的 text-align:center
  2. 块级元素：设置当前块级元素(要有宽度) margin:0 auto
  3. 绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；
  4. flex布局：通过设置justify-content: center;
• 垂直居中的方案
  1. 绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;
  2. flex布局 通过设置align-items: center;
• translate的水平垂直居中
  1. 水平居中：使用left/translate，其中需要知道left是基于包含块的宽度，translate是基于自身的大小。
  2. 垂直居中： 使用top/translate，其中需要知道top是基于包含块的高度，translate是基于自身的大小。
     

	.shuipin{
	 	position: relative;
	    left: 50%;
	    transform: translateX(-50%);
  	  }
  	.chuizhi{
	 	position: relative;
	    top: 50%;
	    transform: translateY(-50%);
  	  }

1.4 形变函数 - scale(x,y) 缩放

1.4.1 认识scale

• 作用： scale()这个函数用于改变元素的大小。并且是scaleX和scaleY函数的简写形式.
• scale的取值：
  1. 一个值时：为scale(x)，表示设置x轴上的缩放
  2. 两个值时：为scale(x,y),表示设置x轴和y轴上的缩放。
• 函数的值类型：
  1. 数字：①0~1时为缩小 ②大于1是为放大
  2. 百分比：非常不常用
• 案例练习

 body {
      text-align: center;
      padding-top: 200px;
    }

    .box {
      border: 5px solid red;
      display: inline-block;
    }

    .container {
      width: 200px;
      height: 200px;
      background-color: orange;

      /* 形变 */
      transform: scale(60%, 60%);
    }

 <div class="box">
    <div class="container">
    </div>
  </div>

1.5 形变函数 - rotate(deg) 旋转

1.5.1 认识rotate

• 作用： rotate()这个函数可以旋转元素，并且rotate函数是rotateZ函数的简写写法，到rotate3d后再了解。
• rotate的取值：一个带deg角度单位的数值
• 案例练习：

 body {
      text-align: center;
      padding-top: 200px;
    }

    .box {
      display: inline-block;
      border: 10px solid red;
    }

    .container {
      width: 200px;
      height: 100px;
      background-color: green;
      transform: rotate(45deg);
    }

<div class="box">
    <div class="container"></div>
  </div>

1.5.2 rotate的其它单位

• 事实上rotate支持的单位有很多的，比如度(deg)、百分度(gradians)、弧度(radians)或圈数(turns)
• 单位转换例图
  • 其中百分度就是把一个圆分为了400度，一个半圈200度
  • 弧度2π就是一个圆，一个π表示180deg
  • 圈数和度数就是字面含义很好理解
    

1.6 形变函数-skew(x,y) 倾斜 （了解）

• 作用： skew()这个函数数定义了一个元素在二维平面上的倾斜转换。skew也是skewX和skewY函数的简写形式.
• skew的取值：
  1. 一个值时：为skew(x deg)，表示x轴上的倾斜。
  2. 两个值时：为skew(x deg,y deg)，表示x轴和y轴上的倾斜。
• 函数的值类型：
  1. deg角度：倾斜的角度

.container:hover {
      transform: skew(-10deg, -10deg);
    }

2 CSS属性 - transform-origin 形变的原点

• 作用： transform-orgin表示形变的原点，它可以修改当前元素形变的原点位置

• transform-origin的取值：

  1. 一个值时：表示设置x轴的原点
  2. 两个值时：表示设置x轴与y轴的原点。

• 函数的值类型：

  1. 数值： 从元素的左上角为一个坐标系开始计算
     

  2. 百分比： 参考自身的元素大小，即是基于自身多少百分比宽度或者高度的距离。

  3. 关键字：left, center, right, top, bottom关键字

• 案例练习

 .container:hover {
      transform: rotate(45deg);
      transform-origin: left top;
    }

3. CSS属性 - transition 过渡动画

3.1 认识transition过渡动画

• 什么是transition动画呢？ ：
  • CSS transitions 给我们提供了一种更改css属性时控制动画速度的方法，可以让属性更改后的立即生效，变化成一种有一定的曲线速率变化的过程。
  • 它是一种 隐式过渡 implicit transitions，表示设置transition后，交友浏览器决定开始与结束之间的过渡状态。
    
• CSS transition可以决定
  1. 哪些属性发生动画效果 (明确地列出这些属性)
  2. 何时开始 (设置 delay）
  3. 持续多久 (设置 duration)
  4. 如何动画 (定义timing function，比如匀速地或先快后慢)

比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效； 但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；

• 注意：并非所有的CSS属性都可以执行动画的，我们可以阅读CSS属性的文档说明来
  

3.2 transition的用法

• transiton是简写属性： 包括transition-property，transition-duration，transition-timing-function 和 transition-delay
  

3.2.1 transition-property 属性名称

• 作用： 指定应用过渡属性的名称
• 常见的取值：
  • all(默认值)：所有属性都执行动画
  • none：所有属性都不执行动画；
  • CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；

3.2.2 transition-duration 持续时间

• 作用： 指定过渡动画所需的时间
• 常见的取值： 单位可以是秒（s）或毫秒（ms），默认值为0s

3.2.3 transition-timing-function 变化曲线

• 作用： 指定动画的变化曲线
• 默认值为ease，更多可以查阅MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

3.2.4 transition-delay 等待时间

• 作用： 指定过渡动画执行之前的等待时间
• 常见的取值： 单位可以是秒（s）或毫秒（ms)

3.2.5 案例练习

 .container {
      border: 5px solid pink;
    }

    .box {
      position: relative;
      left: 0px;
      width: 200px;
      height: 200px;
      background-color: orange;

      /* 过渡 */
      /* transition-property: left;
      transition-duration: 1s;
      transition-timing-function: ease-in;
      transition-delay: 1s; */
      /* 简写属性 */
      /* transition: left 2s ease 1s; */
      transition: all 0.5s;
    }

    .container:hover .box {
      left: 1000px;
      transform: rotate(360deg);
      width: 500px;
    }

<div class="container">
    <div class="box"></div>
  </div>

3.3 transition的不足

• 通过transition来进行过渡动画，会有以下几个缺点：
  1. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有连哥哥状态。
  2. transition不能重复执行，除非一直去触发过渡动画。
  3. transition需要在特定状态下触发才能执行，比如某个属性修改人，然后还需要写好对应的transition-property
     

4. CSS属性 - animation动画

4.1 认识animation动画

• 如果在transition的过渡动画后，我们还希望可以有更多状态的变化，可以使用CSS Animation。
• CSS Animation的使用分成两个步骤：
  1. 步骤一：使用keyframes定义动画序列（每一帧动画如何执行）
     
  2. 步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

4.2 animation的用法

4.1 @keyframes规则

• 定义动画：可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配。
  
• 关键帧的表示：
  1. 百分比：使用百分比来指定动画发生的时间点，0%表示动画的第一时刻，100%表示动画的最终时刻。
  2. 关键词：
  • from：相当于0%
  • to：相当于100%
    

4.2 animation的用法

• animation是简写属性：

• 包括以下内容：

  1. animation-name：指定执行哪一个关键帧动画。
  2. animation-duration：指定动画的持续时间。
  3. animation-timing-function：指定动画的变化曲线。
  4. animation-delay ：指定延迟执行的时间。
  5. animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画。
  6. animation-direction：指定方向，常用值normal和reverse
  7. animation-fill-mode：执行动画最后保留哪一个值
     • none：回到没有执行动画的位置
     • forwards：动画最后一帧的位置
     • backwards：动画第一帧的位置
  8. animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）

• 动画练习：

 .box {
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
      /* Box要执行动画 */
      /* animation-name: changeAnimation;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-delay: 1s; */

      /* 其他属性 */
      /* animation-iteration-count: 2; */
      /* animation-direction: reverse; */
      /* animation-fill-mode: backwards; */
      /* animation-play-state: paused; */
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
      animation: changeAnimation 3s ease-in-out 1s reverse backwards;
    }


    @keyframes changeAnimation {
      0% {
        transform: translate(0px, 0px);
      }


      /* 33% {
        transform: translate(0px, 200px);
      }

      66% {
        transform: translate(400px, 200px);
      } */

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

 <div class="box">

  </div>

5. CSS属性 - vertical align 垂直居中

5.1 引出 行盒 的概念

5.1.1 块级元素中行盒的理解

1. 盒子里只有文本时
   • ==思考一：==在未设置盒子高度时，盒子的高度会被内容撑起来，那么盒子是只有一个行高吗？
   • 分析结论： 显然不是，在之前我们已经有强调过line-height表示的是一行文本所占据的高度，结合下面图片有五行文字那么他就是有五个行高，每个行高总和共同撑高高度。
     
2. 盒子里有文本和行内块元素
   • 思考： 在上面案例的基础上我们在第一行加上一个行内块元素，会发生什么？
   • 分析结论： 第一行相比于其他行的行高会大很多，因为被行内块元素撑大了，这里和行盒的概念相关
   • 行盒：将当前行里面所有的内容全部包裹到一起
     

5.1.2 行盒中的多种行内元素

1. 行盒中只有一串文本： 行盒包裹文本，并且撑开box盒子的高度
   
2. 行盒中有文本与图片：在一行中只有一个行盒，它永远都遵循包裹所有行内级元素的原则，因此行盒会撑大box盒子的高度
   
3. 行盒中有文本、图片和行内块元素：行盒一定要把所有内容都包裹进来的
   
   3.行盒中有文本、图片和具有margin-bottom的行内块元素
   

5.2 认识 vertical-align

5.2.一行盒内包裹多个内容如何对齐

• 我们发现： 在行盒里我们可以放很多东西，这就涉及到摆放的元素如何进行对齐？
• 结论： 使用vertical-align
  

5.2.3 vertical-align 的概念

• 作用: 会影响行内块级元素在一个行盒中垂直方向的位置
  

5.3 图片底部空隙问题

5.1.4 块级元素中img的底部像素

• 思考： 明明图中我们有红色框大小的距离行盒就可以包裹所有的行内元素，为什么要有一个底部空隙呢？
  

• 分析结论： 因为在默认情况下行内级元素是基线对齐的， 在之前行高处也有分析过，文字的基线是x字母的底部，而还有很多是g、j、y等在基线底部也有占据空间的，而行盒是要遵循包裹所有行内级元素和遵循基线对齐的原则
  

5.1.5 解决图片空隙的方法

• 为什么图片底部会有空隙
  • 首先，空隙不是图片的而是因为默认对齐方式造成的。
  • 因为vertical-align的默认对齐方式时baseline，而文本的基线是接触底部的。即使这里没有文字，行盒也会给文字预留空间，因此会有空隙。
• 解决方法：

1. 修改vertical-align的值：不是baseline都可以
2. 修改display属性为block：不是行内级元素不受行盒控制

.box img {
      /* display: block; */
      vertical-align: bottom;
    }

5.4 行盒中内容的baseline

• 思考： 为什么vertical-align对齐方式千奇百怪呢？
• 结论： 我们只是觉得奇怪，但是它一直在遵循内在的规律，就是baseline对齐

有哪些baseline呢？

1. 文本的baseline是字母x的下方
2. inline-block默认的baseline是margin-bottom的底部，没有的话，就是盒子的底部
3. inline-block有文本时，baseline是最后一行文本x的下方
   

5.5 vertical-align的其他值

• 现在，对于不同的取值就非常容易理解了
  • baseline(默认值)：基线对齐（你得先明白什么是基线)
  • top：把行内级盒子的顶部跟line boxes顶部对齐
  • middle：行内级盒子的中心点再加上x-高度一半的线对齐
  • bottom：把行内级盒子的底部跟line box底部对齐
  • <percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一
    样
  • <length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样