CSS 实现心跳

源代码

效果预览

先实现一个正方形，然后旋转实现，实现心的下半部分

//预设一个div
<div class="heart">
    </div>

.heart {
		//这里模拟心跳的动画，后面会写
        animation: beat 1s infinite;
        -webkit-animation: beat 1s infinite;
        //宽为200px
        width: 200px;
        //高为200px
        height: 200px;
        //背景颜色
        background-color: #f00;
        // 添加阴影
		filter:drop-shadow(0px 0px 20px rgb(255,20,20));
		//选装45度制作心尖
        transform: rotate(45deg);
		// 往下往左各移动200px
        position: relative;
        top: 200px;
        left: 200px;
    }

在正方形上加圆，实现心