浏览器渲染原理
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Composite合成(根据层叠关系展示画面)
CSS 动画的两种做法transition
用transition制作一个鼠标移入触发的红心效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="heart">
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
</body>
</html>
*{box-sizing: border-box;}
#heart{
display:inline-block;
margin: 100px;
position: relative;
transition: all 1s;
}
#heart:hover{
transform: scale(1.2);
}
#left{
background: red;
width:50px;
height:50px;
position: absolute;
bottom:50px;
left:-50px;
transform: rotate(45deg) translateX(31px);
border-radius: 50% 0 0 50%;
}
#right{
background: red;
width:50px;
height:50px;
bottom:50px;
left:50px;
position: absolute;
transform: rotate(45deg) translateY(31px);
border-radius: 50% 50% 0 0;
}
#bottom{
background: red;
width:50px;
height:50px;
transform: rotate(45deg) ;
}
给hover情况中添加
transform: scale();
transform: rotate();
transform: skewX();
transform: rotate() skewX();
就可以触发动画效果
CSS 动画的两种做法animation
*{box-sizing: border-box;}
#heart{
display:inline-block;
margin: 100px;
position: relative;
animation: hearts 1s infinite alternate-reverse ;
}
@keyframes hearts{
0%{
transform: scale(1);
}
100%{
transform: scale(1.1);
}
}
#left{
background: red;
width:50px;
height:50px;
position: absolute;
bottom:50px;
left:-50px;
transform: rotate(45deg) translateX(31px);
border-radius: 50% 0 0 50%;
}
#right{
background: red;
width:50px;
height:50px;
bottom:50px;
left:50px;
position: absolute;
transform: rotate(45deg) translateY(31px);
border-radius: 50% 50% 0 0;
}
#bottom{
background: red;
width:50px;
height:50px;
transform: rotate(45deg) ;
}
在红心的基础上去掉hover效果，然后使用animation属性
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名;
@keyframes "动画名" 中描述时间节点与当前节点需要的效果就可以产生动画效果了。
两种方式都可以做出css动画
transform还可以制作中间节点，但需要js监听事件比较麻烦
** 做动画小技巧：如果是我就让设计师给我做成GIF和别的格式直接引用，方便的很**
因为我自己就是设计师
