html

使用svg画一个爱心

发布于 2021-01-11 17:35:00

关注者

被浏览

633

1 个回答

面试哥 2021-01-12

为面试而生，有面试问题，就找面试哥。

曲线路径网上找的，有大神提示提示怎么用svg编辑器画完图然后用转化为path可用的贝塞尔曲线路径啊
原文地址：https://wow.techbrood.com/fiddle/8062
删减版(省去了前面的动画，只画最后的爱心)：

<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>

知识点

html

面圈网VIP题库全新上线，海量真题题库资源。 90大类考试，超10万份考试真题开放下载啦

去下载看看