CSS知识总结(动画)
浏览器渲染原理
基本流程: 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树,如下图: 名称解释:
DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
注意：
display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
CSS动画
transition 制作红心查看效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 文件字符编码 -->
<meta charset="utf-8">
<!-- 兼容手机,禁止缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 告诉IE使用最新内核 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS动画(transform 全解)红心</title>
<style type="text/css">
*{box-sizing: border-box;}
.container{
display: inline-block;
margin: 100px;
height: 80px;
width: 80px;
position: relative;
transition: all 1s;
}
.container:hover{
transform: scale(1.2);
}
.container div{
width: 50px;
height: 50px;
/* border: #FF0000 solid; */
background-color: #FF0000;
}
.container>.left{
transform: rotate(45deg) translateX(-32px);
position: absolute;
border-radius: 50% 0 0 50%;
}
.container>.right{
transform: rotate(-45deg) translateX(32px);
position: absolute;
border-radius: 0 50% 50% 0;
}
.container>.bottom{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
animation 制作跳动红心 查看效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 文件字符编码 -->
<meta charset="utf-8">
<!-- 兼容手机,禁止缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 告诉IE使用最新内核 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS动画(transform,animation)红心</title>
<style type="text/css">
*{box-sizing: border-box;}
.container{
display: inline-block;
margin: 100px;
height: 80px;
width: 80px;
position: relative;
/* transition: all 1s; */
animation: 0.35s heart infinite alternate-reverse;
}
@keyframes heart{
0%{transform: scale(0.98);}
100%{transform: scale(1.2);}
}
.container div{
width: 50px;
height: 50px;
/* border: #FF0000 solid; */
background-color: #FF0000;
}
.container>.left{
transform: rotate(45deg) translateX(-32px);
position: absolute;
border-radius: 50% 0 0 50%;
}
.container>.right{
transform: rotate(-45deg) translateX(32px);
position: absolute;
border-radius: 0 50% 50% 0;
}
.container>.bottom{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
