一、浏览器渲染原理
大体分为5个部分
- 渲染引擎首先解析HTML和CSS文档，构建HTMLS树（DOM）和CSS树（CSSOM）。
- 将两棵树合并，构建渲染树（Rendering Tree）。
- Layout 根据渲染树计算每个节点的信息，主要为文档流、盒模型，计算元素大小和位置。
- Paint根据计算好的信息，绘制整个页面。把边框颜色、文字颜色、阴影等画出来。
- Compose合成，根据层叠关系展示画面。
二、用CSS制作动画（transition和animation）
1.transition属性制作动画过渡
transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
一般语法如下：
/* 属性名 | 持续时长 | 过渡效果（这里是淡入和淡出） | 延迟时间 */
transition: margin-right 4s ease-in-out 1s;
如果想让所有属性共享一个效果，可以用：
transition: all 0.5s ease-out;
具体动画演示案例可以查看transition-MDN。
2.animation属性
animation属性用来指定一组或多组动画，每组之间用逗号相隔。
/* @keyframes持续时间 | 动画速度（此处为线性） | 延迟时间1s | 动画效果（滑入） */
animation: 3s linear 1s slidein;
三、利用transition和animation，打造一个小心心
最终成品效果，红心会自己放大缩小：
主要思路如下：
- 用CSS创建3个正方形；
- 把两个正方形变成圆形；
- 再把2个圆形嵌入到正方形中，填充背景颜色，即可合成一个爱心。
HTML代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JS Bin</title>
</head>
<body>
<div id=heart>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
CSS代码展示：
#heart {
margin: 100px;
display: inline-block;
position: relative;
transition: all 1s ease-in-out;
animation: heart 1s infinite alternate;
}
@keyframes heart {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.5);
}
}
#heart > .left {
border: 1px solid red;
width: 60px;
height: 60px;
position: absolute;
bottom: 50px;
left: -50px;
transform: rotate(45deg) translateX(41px);
border-radius: 50% 0 0 50%;
background: red;
}
#heart > .right {
border: 1px solid red;
width: 60px;
height: 60px;
position: absolute;
bottom: 50px;
right: -50px;
transform: rotate(45deg) translateY(41px);
border-radius: 50% 50% 0 0;
background: red;
}
#heart > .bottom {
border: 1px solid red;
width: 60px;
height: 60px;
transform: rotate(45deg);
background: red;
}
赶紧学起来吧~
