简单html+css的案例：跳动的心

零、前言

本案例来源于B站尚学堂“【HTML+CSS+JS+Vue】比大学课程还详细的Web前端教程，整整180集，学完即可兼职就业！附学习文档PDF，随时都能学_前端开发_WEB入门”课程案例。

一、绘制心形思路

我们先将心分割为下列三个部分，一个正方形和两个半圆形

为了减少DOM元素，我们可以通过:before与:after两个伪元素

接下来就简单了，我们需要将“心”进行旋转45度，将“心”放正

温馨提示

让半圆与正方形进行重合，避免元素中间出现细线~

二、HTML结构

<div class="heart"></div>

三、CSS样式

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width: 100%;
}
body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: pink;
}
.heart {
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    transform: rotate(45deg);
}
.heart::before {
    content: '';
    width: 200px;
    height: 100px;
    background: red;
    position: absolute;
    left: 0;
    top: -99px;
    border-radius: 100px 100px 0 0;
}
.heart::after {
    content: '';
    width: 100px;
    height: 200px;
    background: red;
    position: absolute;
    left: -99px;
    top: 0;
    border-radius: 100px 0 0 100px;
}

四、跳动的心_跳动起来

让心跳动起来，可以使用CSS3动画实现，利用缩放实现跳动

我们可以在添加一些阴影效果，让“心”看起来更美观

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: pink;
}
.heart {
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    transform: rotate(45deg);
    animation: heartbit 1s alternate infinite;
    box-shadow: 0 0 30px red;
}
.heart::before {
    content: '';
    width: 200px;
    height: 100px;
    background: red;
    position: absolute;
    left: 0;
    top: -99px;
    border-radius: 100px 100px 0 0;
    box-shadow: 0 0 30px red;
}
.heart::after {
    content: '';
    width: 100px;
    height: 200px;
    background: red;
    position: absolute;
    left: -99px;
    top: 0;
    border-radius: 100px 0 0 100px;
    box-shadow: 0 0 30px red;
}
@keyframes heartbit {
    0% {
        transform: rotate(45deg) scale(0.6);
    }
    100% {
        transform: rotate(45deg) scale(1.4);
    }
}