心跳动画---纯css实现

<style>
            * {
                margin: 0;
                padding: 0;
            }

            .heart {
                -webkit-animation: heartbeat 1s infinite;
                -webkit-animation: heartbeat 1s infinite;
                /* Safari 和 Chrome */
                width: 198px;
                height: 198px;
                background: #f00;
                position: relative;
                -webkit-filter: drop-shadow(0px 0px 20px rgb(255, 20, 20));
                -webkit-transform: rotate(45deg);
                left: 200px;
                top: 200px;
            }

            .heart:before,
            .heart:after {
                content: "";
                position: absolute;
                width: 200px;
                height: 200px;
                background: #f00;
                border-radius: 100px;
            }

            .heart:before {
                left: -100px;
            }

            .heart:after {
                left: 0;
                top: -100px;
            }

            @-webkit-keyframes heartbeat {
                0% {
                    -webkit-transform: rotate(45deg) scale(0.8, 0.8);
                    opacity: 1;
                }
                25% {
                    -webkit-transform: rotate(45deg) scale(1, 1);
                    opacity: 0.8;
                }
                100% {
                    -webkit-transform: rotate(45deg) scale(0.8, 0.8);
                    opacity: 1;
                }
            }
    </style>

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