浏览器渲染原理与制作跳动的心通过transform: rotate(xdeg);旋转图像绘制出一颗心。通过transf

浏览器渲染原理

根据HTML构建一颗HTML树（DOM）
根据CSS构建一颗CSS树（CSSOM）
将两棵树合并成一颗渲染树（render tree）
Layout布局（计算渲染树的每个元素包含的内容，比如文档流的位置，盒模型的大小等）
Paint绘制（绘制渲染树的各个节点到屏幕上，比如边框、背景、阴影等）
Compose合成（根据层叠关系展示画面）

HTML树（DOM）、CSS树（CSSOM）、渲染树（Render Tree）如下图：

运用 transition 制作一颗跳动的红心

通过transform: rotate(xdeg);旋转图像绘制出一颗心。
通过transform: scale(x);来改变心的大小。
通过transition: all 1s;在心的变化过程中增加过渡帧。

源码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heart</title>
    <link rel="stylesheet" href="heart.css">
</head>

<body>
    <div class="heart">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

* {
    box-sizing: border-box;
}

.heart {
    margin: 100px;
    /* border: 1px solid black; */
    display: inline-block;
    position: relative;
    transition: all 1s;
}

.heart:hover {
    transform: scale(1.5);
}

.heart>.bottom {
    background: red;
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
}

.heart>.left {
    position: absolute;
    background: red;
    width: 50px;
    height: 50px;
    right: 50%;
    bottom: 50%;
    transform: rotate(45deg);
    border-radius: 50% 0 0 50%
}

.heart>.right {
    position: absolute;
    background: red;
    width: 50px;
    height: 50px;
    left: 50%;
    bottom: 50%;
    transform: rotate(-45deg);
    border-radius: 0 50% 50% 0;
}

运用 animation 制作一颗跳动的红心

通过@keyframes描述不同时刻关键帧的动画效果。
通过animation: heartbeat 700ms infinite alternate;给心添加@keyframes描述的动画效果并说明动画时间、动画次数和动画是否反复。

相较于transition制作心的源码改动如下：


.heart {
    margin: 100px;
    /* border: 1px solid black; */
    display: inline-block;
    position: relative;
    /* transition: all 1s; */
    animation: heartbeat 700ms infinite alternate;
}
@keyframes heartbeat {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.4);
    }
}