浏览器的渲染原理
- 解析：
1.根据HTML构建DOM：
处理HTML标记并构造DOM树。HTML解析涉及到 tokenization 和树的构造。HTML标记包括开始和结束标记，以及属性名和值。 如果文档格式良好，则解析它会简单而快速。解析器将标记化的输入解析到文档中，构建文档树。
2.根据CSS构建CSSOM：
处理HTML标记并构造DOM树。HTML解析涉及到 tokenization 和树的构造。HTML标记包括开始和结束标记，以及属性名和值。 如果文档格式良好，则解析它会简单而快速。解析器将标记化的输入解析到文档中，构建文档树。
- 渲染：
1.将DOM和CSSOM组合成一个Render树：
计算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。
2.Layout布局：
通俗的解释为确定文档流，盒模型，计算大小和位置。
3.Paint绘制：
通俗的解释为把边框颜色，文字颜色，阴影等计算渲染出来。
4.Compositing：
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。
简单的平面CSS过渡效果制作
- Transition(过渡)：
过渡是css3中的重要特性，可以让我们在不使用flash动画和JavaScript的情况下，使当前元素从一种样式变为另一种样式时为元素添加效果。
经常和:hover一起使用，实现鼠标悬浮时效果的变化。
transition的取值： 1.属性：想要变化的css属性，例如长，宽，高。 2.花费时间：单位是秒 如：0.5s （单位必须表达）。 3.运动曲线：默认是ease（可以不写）。 4.开始时间：单位是秒，可以设置延迟触发时间，默认是0s。
如果想要多个属性一起变化需要加 , 分隔。通常用all，例如：
<style>
div {
width: 200px;
height: 200px;
color: snow;
font-size: 50px;
background-color: rgb(136, 209, 238);
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 400px;
background-color: rgb(219, 134, 134);
}
</style>
<body>
<div>
content
</div>
</body>
实现的效果：
需要注意的是：transitinon代码需要写在作用对象本身。
实际生活中我们可以遇到很多需要靠过渡属性实现的动画效果，
例如：
1.进度条：
<style>
.progress {
<!-- 进度条外框 -->
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
}
.bar {
<!-- 进度条 -->
width: 60%;
height: 100%;
background-color: red;
border-radius: 6px;
<!-- 过渡效果 -->
transition: all 0.6s;
}
.progress:hover .bar {
width: 100%;
<!-- 需要实现的过渡 -->
}
</style>
<body>
<div class="progress">
<div class="bar"></div>
</div>
</body>
实现的效果：
2.小米logo：
<style>
.box {
width: 55px;
height: 55px;
margin: 100px auto;
overflow: hidden;
}
.box .logo {
display: block;
position: relative;
width: 100%;
height: 100%;
background-color: #ff6700;
}
.box .logo::before,
.box .logo::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.2s;
}
.box .logo::before {
background: url(images/mi-logo.png) no-repeat 50% 50%;
}
.box .logo::after {
background: url(images/mi-home.png) no-repeat 50% 50%;
margin-left: -55px;
}
.box .logo:hover::before {
margin-left: 55px;
}
.box .logo:hover::after {
margin-left: 0px;
}
</style>
<body>
<div class="box">
<a class="logo" ></a>
</div>
</body>
实现的效果：
通常情况下transfrom要配合过渡效果，实现动画效果。
- Transform(使改变形态)：
四个常用的功能
rotate（旋转）：旋转45度：transform: rotate(45deg)，deg为单位度。
scale（缩放）: transform: scale(x, y),xy为宽高，等比缩放时可以写一个值。优点：不会影响其他盒子，可以设置中心点。
translate（位移）： transform: translate（x，y），位移如果配合其他属性需要放在最前面。
skew（倾斜）：transform: skew（x，y）xy单位是deg
简单的平面CSS动画效果制作
动画（animation）：相较于过渡，动画可以实现更多变化，连续自动播放等效果。
动画的基本使用：
- 1.定义动画
- 2.调用动画
使用keyframes定义动画（类似伪类选择器）
动画序列：规定，0%是动画的开始，100%是动画的完成。（也可以用 from,to；可以做多个状态【keyframes 关键帧】的动画序列，例如：0% 25% 50% 75% 100%。 这个% 就是总时间的划分。）,
@keyframes xxx {
/*动画初始的状态*/
0% {
transform: xxxxxx;
}
100% {
/*动画结束的状态*/
transform: xxxxxx;
}
}
调用动画：
div {
/*盒子的样式属性*/
width: xx;
height: xx;
background-color: xx;
/*调用动画，名称就是自己定义的动画名称。动画的持续时间*/
animation-name: xxx;
animation-duration: 2s;
}
常用的 animation 的属性
- 动画的名称：
animation-name - 动画完成一个周期的时间:
animation-duration - 动画的运动曲线:
animation-timing-function - 动画的开始时间:
animation-delay - 动画的重复次数:
animation-iteration-count(可以取数字1,2,3...infinite循环) - 动画是否反方向播放:
animation-direction(默认normal,alternate逆向播放) - 动画结束时的状态:
animation-fill-mode(默认backwards回到起始状态,forwards停在结束状态) - 动画是否运行:
animation-play-state(默认running运行，paused停止，通常配合鼠标经过使用)
常见的简写形式: animation: 名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
tips：通常如果我们记不住所有的属性顺序时，在有emmet的编辑器中，直接输入animation 按下tab，在进行注释，比对着写出代码。
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: demo-1 2s linear .5s infinite alternate forward;
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！