浏览器渲染原理和CSS动画效果实现

·  阅读 445

一、浏览器渲染原理

渲染树

大体分为5个部分

  1. 渲染引擎首先解析HTML和CSS文档,构建HTMLS树(DOM)和CSS树(CSSOM)。
  2. 将两棵树合并,构建渲染树(Rendering Tree)。
  3. Layout 根据渲染树计算每个节点的信息,主要为文档流、盒模型,计算元素大小和位置。
  4. Paint根据计算好的信息,绘制整个页面。把边框颜色、文字颜色、阴影等画出来。
  5. Compose合成,根据层叠关系展示画面。

二、用CSS制作动画(transitionanimation

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;
复制代码

三、利用transitionanimation,打造一个小心心

最终成品效果,红心会自己放大缩小:

红心

主要思路如下:

  • 用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;
}

复制代码

完整版DEMO

赶紧学起来吧~

分类:
阅读
标签: