效果图

代码

<!DOCTYPE html>
<html lang="zh-CN">
        <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta http-equiv="Expires" content="0">
                <meta http-equiv="Pragma" content="no-cache">
                <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
                <meta http-equiv="Cache" content="no-cache">
                <meta name="referrer" content="no-referrer" />
                <style>
                        body {
                                min-height: 100vh;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: #333;
                        }

                        .heart {
                                width: 10vmin;
                                height: 10vmin;
                                background: red;
                                transform: rotate(-45deg);
                                box-shadow: -10px 10px 100px #f22004;
                                position: relative;
                                animation: ht 1s linear infinite;
                        }

                        @keyframes ht {
                                0% {
                                        transform: rotate(-45deg) scale(1.07);
                                }

                                50% {
                                        transform: rotate(-45deg) scale(1);
                                }

                                100% {
                                        transform: rotate(-45deg) scale(0.9);
                                }
                        }

                        .heart:before,
                        .heart:after {
                                content: '';
                                width: 10vmin;
                                height: 10vmin;
                                background: red;
                                position: absolute;
                                border-radius: 50%;
                                box-shadow: -10px 10px 100px #f22004;
                        }

                        .heart:before {
                                top: -50%;
                        }

                        .heart:after {
                                right: -50%;
                        }
                </style>
        </head>
        <body>
                <div class="heart"></div>
        </body>
</html>
css3 跳动的心

效果图

代码
