[html] 使用svg画一个爱心

<head>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .heart-loader {
            position: absolute;
            display: block;
            left: 50%;
            top: 50%;
            margin-top: -90px;
            width: 180px;
            height: 180px;
            overflow: visible;
            transform-origin: 0 90px;
            animation: rotate-anim 3s infinite;
        }
        .heart-loader__heartPath {
            stroke: #E21737;
            fill: transparent;
            stroke-dasharray: 308.522, 308.522;
            stroke-dashoffset: 308.522;
            animation: heart-anim 3s infinite;
        }
        /*  翻转 */
        @keyframes rotate-anim {
            0% {
                transform: rotate(-45deg);
            }
            90% {
                transform: rotate(-45deg);
                opacity: 1;
            }
            97% {
                transform: rotate(-45deg);
                opacity: 0;
            }
            100% {
                transform: rotate(-45deg);
                opacity: 0;
            }
        }
        /*  爱心动画 */
        @keyframes heart-anim {
            40% {
                stroke-dashoffset: 308.522;
                fill: transparent;
            }
            55% {
                stroke-dashoffset: 0;
                fill: transparent;
            }
            72% {
                stroke-dashoffset: 0;
                fill: #E21737;
            }
            100% {
                stroke-dashoffset: 0;
                fill: #E21737;
            }
        }
        </style>
</head>

<body>
    <svg class="heart-loader" viewBox="0 0 90 90" version="1.1">
        <path class="heart-loader__heartPath" stroke-width="2" d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0"></path>
    </svg>
</body>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题