CSS 知识总结重新绘制. ==颜色和阴影等== 用setTimeout, 在浏览器渲染完成后加入, 重新渲染. 这样做

浏览器渲染原理

渲染步骤:

构建html树
构建css树
两棵树合并成一个渲染树
计算布局, 也就是==元素的大小和位置==
重新绘制. ==颜色和阴影等==
合成, 也就是根据层叠关系==压成一张纸== 如何用transform和transition实现位移动画?

写好基本的html和css

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

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

</html>

#demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: all 2s ;/*这个不放到demo.end的原因: 变化不止,位移,可能还有颜色, 大小, 所以放到总的合适*/
}

写好附加的css
```
#demo.end{
  transform: translateX(300px);  
}
```
用setTimeout, 在浏览器渲染完成后加入, 重新渲染.
```
setTimeout(()=>{
  demo.classList.add('end')
},0)
```
这样做的好处: ==总共浏览器经过2次渲染==. 我们能在第二次渲染看到位移的变化

如果直接将transform: translateX(300px); 加入demo的样式. 那么总共就经历一次渲染, 我们看不到唯一的变化.

画一个跳动的心

html结构, cssreset

  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>

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

正方形撑开, margin隔开

.wrapper{
  margin:100px;
}

.bottom{
  width:50px;
  height:50px;
  border: 1px solid red;
}

做两个圆

.left{
  width:50px;
  height:50px;
  border: 1px solid red;
  border-radius:50%; /*这个属性名不会写*/
}
.right{
  width:50px;
  height:50px;
  border: 1px solid red;
  border-radius:50%;
}

转一下方形

.bottom{
  width:50px;
  height:50px;
  border: 1px solid red;
  transform:rotate(45deg);
}

相对定位, 绝对定位好移动圆

.wrapper{
  margin:100px;
  position:relative;
}
.left{
  width:50px;
  height:50px;
  border: 1px solid red;
  border-radius:50%;
  position:absolute;
}
.right{
  width:50px;
  height:50px;
  border: 1px solid red;
  border-radius:50%;
  position:absolute;
}

将圆移动左右上角.

.wrapper{
  margin:100px;
  position:relative;
  display: inline-block;/*这里解决left:100%;圆跑的太远*/
}
.left{
  width:50px;
  height:50px;
  border: 1px solid red;
  border-radius:50%;
  position:absolute;
  right:100%; 
  bottom:100%;
  
}
.right{
  width:50px;
  height:50px;
  border: 1px solid red;
  border-radius:50%;
  position:absolute;
  bottom:100%;
  left:100%;
}

将圆变回正方形, 旋转45deg, translateX

.left{
  width:50px;
  height:50px;
  border: 1px solid red;
  /* border-radius:50%; */
  position:absolute;
  right:100%;
  bottom:100%;
  transform:rotate(45deg) translateX(21px);
  
}
.right{
  width:50px;
  height:50px;
  border: 1px solid red;
  /* border-radius:50%; */
  position:absolute;
  bottom:100%;
  left:100%;
  transform:rotate(45deg) translateY(21px);
  
}

变长半圆. 去掉border, 加background. 鼠标上去,变大.

.wrapper{
  margin:100px;
  position:relative;
  display: inline-block;
  transition: all 1s;
}

.bottom{
  width:50px;
  height:50px;
  background:red;
  transform:rotate(45deg);
}
.left{
  width:50px;
  height:50px;
  background:red;
  border-radius:50% 0 0 50%;
  position:absolute;
  right:100%;
  bottom:100%;
  transform:rotate(45deg) translateX(30px);
  
}
.right{
  width:50px;
  height:50px;
  background:red;
  border-radius:50% 50% 0 0;
  position:absolute;
  bottom:100%;
  left:100%;
  transform:rotate(45deg) translateY(30px);
}
.wrapper:hover{
  transform:scale(1.2)
}

具体效果: js.jirengu.com/yadaz/1/edi…

写两个transform会造成覆盖. 尽管一个transX, 一个transY. 写成一行就可以了.

transform: scale(1.5,0.5);两个数: 1.5表示x轴, 0.5表示y轴. 如果只有一个数:1.5表示整体的放大缩小.

旋转:

rotate:(45deg): 顺时针旋转45deg

animation把红心在做一遍

写关键帧

加入animation 不断变, 还要变小的动画

.wrapper{
  margin:100px;
  position:relative;
  display: inline-block;
  animation: heart 1s infinite alternate;
}
@keyframes heart{
  0%{
    transform:scale(1.0);
  }
  100%{
    transform:scale(1.2);
  }
}

具体效果: js.jirengu.com/mebec/1/edi…