《CSS 知识总结》浏览器渲染过程：大致过程如下：浏览器获取 HTML 文件，根据html构建html树（DOM）

浏览器渲染过程：

大致过程如下：

浏览器获取 HTML 文件，根据html构建html树（DOM）
根据css构建CSS树（cssom）
根据文档模型 DOM 和样式模型CSSOM生成渲染树
对布局进行计算(如文档流、大小位置和盒模型)
对元素进行绘制，添加颜色等
composite合成（根据层叠关系展示画面）

css动画的两种制作方法

1.用transition制作动画

代码如下：

html

<!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>
    <link rel="stylesheet" href="./1.css">
</head>

<body>

</body>
<div id="demo"></div>

</html>

#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /* 表示当width发生变化时，补1s的中间动画，即补帧 */
  /* transition: width 1s; */
  transition: all 1s ease-in-out;
}

#demo:hover {
  width: 200px;
}

2.用animation制作动画

代码如下：

html

<!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>跳动的心</title>
    <link rel="stylesheet" href="./1.css">
</head>

<body>
    <div id="heart">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes heart {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

#heart {
  margin: 100px;
  position: relative;
  /* border: 1px solid black; */
  display: inline-block;
  transition: all 0.7s;
  animation: heart 1.2s infinite alternate linear;
}
#heart:hover {
  transform: scale(1.5);
}

#heart > .bottom {
  height: 50px;
  width: 50px;
  /* border: 1px solid red; */
  transform: rotate(45deg);
  background: rgb(236, 10, 10);
}

#heart > .left {
  height: 50px;
  width: 50px;
  /* border: 1px solid red; */
  border-radius: 50% 0 0 50%;
  position: absolute;
  bottom: 100%;
  right: 100%;
  transform: rotate(45deg) translateX(31px);
  background: rgb(236, 10, 10);
}
#heart > .right {
  height: 50px;
  width: 50px;
  /* border: 1px solid red; */
  border-radius: 0 50% 50% 0;
  position: absolute;
  bottom: 100%;
  left: 100%;
  transform: rotate(-45deg) translateX(-31px) translateY(-0.5px);
  background-color: rgb(236, 10, 10);
}

关于transform属性的一点笔记

transform这个属性只能转换由盒模型定位的元素。如果元素具有display:block;则由盒模型定位元素。

四个常用功能：

位移translate，有transform:translateX(10px);transform:translateY(10px);transform:translateZ(10px);

缩放scale

旋转rotate

倾斜skew

经验：一般需要配合transition过渡，inline元素不支持transform,需要先变成block

sketchup //三维建模软件

translateY(-50%)表示y轴方向向上移动自身的50%

transform:translate(-50%,-50%);可做绝对定位元素的居中

transform:scale(1.5); //表示会变成原来的1.5倍

transform:skewX(13deg);

transform:scale(0.5) translate(39%,23%) //即可以同时使用transform中的所有属性，只要用空格隔开每个属性就好

transform属性通常与选择器的:hover类配合使用，从而实现鼠标移入的效果，同时配合transition:all 1s;设置动画的时间，达到动画效果