css3 实现心跳

​ 源代码

效果预览

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

//预设一个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;
    }      

在正方形上加圆，实现心

//使用::before和::after
   .heart::before,
    .heart::after {
    
        content: "";
        //与正方行为参照。必须写。具体的位置，分开写，见下。
        position: absolute;
        //宽和高都为200px;保证和正方型重叠的部分大小一致。
        width: 200px;
        height: 200px;
        //设置弧度为100px，实现圆
        border-radius: 100px;
        background-color: #f00;

    }
// 设置位置
    .heart:before {
        left: -100px;
    }
// 设置位置
    .heart::after {
        left: 0px;
        top: -100px;
    }      

添加动画

@keyframes beat {
        0% {
        //注意这里一定要加上rotate(45deg)，不加的话，会默认不旋转
            transform: rotate(45deg) scale(0.8, 0.8);
            // 设置透明度
            opacity: 1;
        }

        25% {
            transform: rotate(45deg) scale(1, 1);
            opacity: 0.8;
        }

        100% {
            transform: rotate(45deg) scale(0.8, 0.8);
            opacity: 1;
        }
    }