CSS 形变动画*2 基准线CSS 形变动画*2 基准线 CSS transform 形变的使用这个属性的设置的话

CSS 形变动画*2 基准线

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类以及其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

CSS `transform` 形变的使用

这个属性的设置的话，就是实现的是对某一个元素进行一些形变的效果，包括了旋转，缩放，倾斜，平移等等
实现书写这个属性的时候，我们书写的基本格式为: transform: transform-function || transform-property
设置属性的时候，就是实现的是我们的书写我们的CSS 函数来实现完成的效果
常见的几个 transform function
- translate function
  - 实现书写的基本的格式: transform: translate(x, y)
  - 这个函数的设置就是实现的是元素的平移
  - 然后实现平移的时候，我们需要两个值，一个和就是x轴 translateX的平移量，一个就是y轴 translateY的平移量
    - 同时还是可以通过这个属性来实现设计3D效果的: translate3d
  - 然后里面可以书写的值含有: 像素值，百分比等等
    - 使用百分比还是可以实现元素的水平或者垂直居中
    - 以前的水平居中的方式:
      - 块级元素: margin； 0 auto
      - 行内级元素： text-align: center
    - 实现垂直居中：
      - 绝对定位：直接通过 top: 0; bottom: 0;margin:auto 0;
    - 现在的话就可以通过我们的top/translate 来实现我们的居中
      - 和前面的一个图片的居中是一样的思路：
        
        selector { position: relative; top: 50%; transform: translate(0, -50%) }
        
        可以回顾回顾
    - ```
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
            body {
              padding: 0;
              margin: 0;
        
              .box, .box01 {
                width: 100px;
                height: 100px;
              }
        
              .box {
                  background-color: skyblue;
                  /* 开始实现我们的平移的效果 */
                  /* 下面的属性的设置就是实现的是:先x和y轴实现平移，然后单独实现在x轴的平移，然后是在y轴的平移 */
                  transform: translate(100px, 200px) translateX(200px) translateY(200px);
                }
        
                .box01 {
                  background-color: red;
                }
            }
          </style>
        </head>
        <body>
          <div class="box"></div>
          <div class="box01"></div>
        </body>
        </html>
```
- scale(x, y) 缩放
  - 可以实现的就是通过这个函数来对我们的元素实现缩放的功能
    - 可以对我们的x轴实现缩放，也是可以实现对我们的y轴实现缩放
      - 一个值得时候，就是对x轴实现缩放
      - 两个值得时候，就是x轴和y轴直接实现缩放即可
    - 默认值是每个方向的是1
      - >1 那么就是实现的是放大的效果
      - <1 那么就是实现的是缩小的效果
  - 后面的话，我们还是可以设计3d效果的scale3d()
- rotate(<angle>) 旋转
  - 这个就是实现的是对我们的元素本身实现旋转，默认的旋转的中心点是我们的原心
    - 但是后面的话，我们还是可以设置旋转的时候的旋转中心点的，以及旋转的旋转轴
    - transform: rotate(90deg) 注意正方形的时候不要旋转这个角度，否则可能发现的是没效果
- transform-origin 修改形变原点
  - 默认的原点: x --- center y --- center
    - 水平方向可以设置的值： left center right
    - 垂直方向可以设置的值： top center bottom
- skew(x, y)
  - 就是实现的是让我们的元素在二维平面的倾斜转换
  - 设置的值还是实现的是我们的： deg
- 注意我们的形变的效果一般的话，和我们的过渡动画一起实现使用的

CSS transition 过渡动画

首先的话，这个属性的话，不是立即生效的，这个是可以来实现我们的页面的中的某个元素具备动画的效果
就是实现的是我们的元素的两个状态之间的隐式过渡（implicit transitions）
首先这个属性的话我们可以实现设置的属性是：
- 那些属性发生动画的效果（明确的列出来即可，但是需要注意的是，不是所有的属性都可以设置动画效果的）
- 什么时候开始动画（设置delay）
- 动画的持续时间（设置 duration）
- 设置动画开展的速度变化（time function）
transition的属性设置
- transition-property 就是实现的是我们的设置需要实现过渡的时间
  - 可以设置的值含有：
    - transform 这个时候就可以实现监视transform形变的变化了
    - left 这个就是对left 变化进行监视
    - all 在开发中的话，一般都是设置这个值，把所有的属性进行监视
- transition-duration 设置动画过渡持续的时间
  - transition-duration: 1s
- transition-timing-function 设置动画显示的时候的进行方式
  - 属性设置网址
- transition-delay 设置动画开始的时间延迟
  - transition-delay: 2s
混合属性的书写：
- transition: transition-property transition-duration transition-timning-function transition-delay
- transition: all 1s ease-in 1s

CSS `animation` 动画

出现使用animation动画的原因
- 是因为transition 的动画的本质的话，只是实现的是我们的将开始和结束状态的动画的设置，不可以设置中间的动画
- 然后的话transition 动画不可以实现自动的运行，也不可以重复执行
- transition 只可以实现的是在某一个属性发生了变化后，才可以触发动画的效果
为什么使用CSS Animation
- 就是为了解决我们的动画不可重复执行，然后实现自动的运行的效果
如何实现animation 动画
- 步骤一：使用@keyframes 来实现定义动画序列（每一帧动画如何执行）【视频的本质就是：一张张的图片结合而成的】
- 步骤二：配置动画执行的名称，持续时间，动画曲线，延迟，执行次数，方向等等

@ketframes的使用

这个的实现的是我们的定义每一帧的状态的设置
from 等价于我们的 0%
to 等价于我们的 100%

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        body {
          padding: 0;
          margin: 0;
    
          .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 开始实现使用我们的动画的设置的执行 */
            animation-name: box_animation;
            animation-duration: 4s;
            animation-timing-function: ease;
            animation-delay: 1s;
    
            /* 设置动画执行次数 */
            /* animation-iteration-count: 6; */
            animation-iteration-count: infinite;  /* 无限动画 */  
            animation-play-state: running;
          }
        }
    
    
          /* 开始实现定义animation的动画每一帧的变化 */
          /* 基本的格式为： @keyframes 名称 { 百分比 { 属性的设置 } } */
          /* 注意我们的这个动画的设置的时候，需要的是写在我们的全局的，否则失效 */
          @keyframes box_animation {
            0% {
              transform: translate(0, 0)
            }
    
            25% {
              transform: translate(200px, 0);
              background-color: red;
            } 
    
            50% {
              transform: translate(200px, 200px);
              background-color: yellow;
            }
    
            75% {
              transform: translate(0, 200px);
              background-color: green;
            }
    
            100% {
              transform: translate(0, 0);
              background-color: skyblue;
            }
          }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="box"></div>
      </div>
    </body>
    </html>

animation 属性的设置
- 实现了定义了自己的每一帧的动画的状态，这个时候，我们就可以开始设置animation的属性实现运行了
- 官网MDN

CSS `vertical-align`属性设置

假如说：前端中一个没有设置宽高的盒子，但是是含有内容的，这个时候盒子具有一定的高度是为什么耶：
- 以前我们的说的是：一个盒子的高度和内容的话，只是由我们的内容实现的撑起来的
- 但是实际上标准的说的话，盒子的高度的话，实际上是由我们的内容的行高撑起来，所以说这才是盒子真真的高度

理解 baseline 的设置
- 首先在我们的一个行盒里面，我们可以设置的值含有: 就是通过我们的基准线来实现的对齐
- 因为有了这个基准线的设置，内容才可以实现我们的在网页中的美观显示: 一个行盒中的行内元素的对齐方式
- MDN文档

注意，我们的 inline-block 以及 inline 都是我们的行内级元素

CSS 形变 动画*2 基准线

CSS 形变 动画*2 基准线

CSS transform 形变的使用

CSS transition 过渡动画

CSS animation 动画

CSS vertical-align属性设置

CSS 形变动画*2 基准线

CSS 形变动画*2 基准线

CSS `transform` 形变的使用

CSS `animation` 动画

CSS `vertical-align`属性设置