摸鱼！HTML&CSS：画个心跳玩玩~

效果演示

这段代码是一个HTML和CSS的组合，它包含了一个SVG图形，该图形被设计成一个心形，并使用了CSS动画来创建一个“心跳”的效果

HTML

<svg class="heart" viewBox="-5 -5 278 56" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg">
    <filter>
        <feGaussianBlur stdDeviation="1.6"></feGaussianBlur>
    </filter>
    <g transform="translate(29.1 -127.42)" id="layer1">
        <path pathLength="1"
            d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36"
            id="line"></path>
    </g>
    <g transform="translate(29.1 -127.42)" id="layer2">
        <path pathLength="1"
            d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36"
            id="point" filter="url(#blur)"></path>
    </g>
</svg>

• svg标签定义了一个 SVG 图形，class=“heart” 用于应用 CSS 样式，viewBox 属性定义了 SVG 画布的视图区域。
• filter 标签定义了一个滤镜效果，这里是一个 feGaussianBlur 高斯模糊效果。
• g标签用于对 SVG 内部的元素进行分组和变换，transform 属性用于平移图形。
• path标签定义了 SVG 路径，d 属性定义了路径的详细指令，pathLength=“1” 表示路径的长度为 1，这个属性用于动画中。
• id=“line” 和 id=“point” 分别为两个路径元素提供了 ID，以便在 CSS 中引用。

CSS

.heart #line {
    fill: none;
    stroke: #e00000;
    stroke-width: 1.5;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-miterlimit: 4;
    stroke-opacity: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dash 3s linear infinite;
}

.heart #point {
    fill: none;
    stroke: #f00000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 0.1;
    stroke-opacity: 1;
    stroke-dasharray: 0.0001, 0.9999;
    stroke-dashoffset: 1;
    animation: dash 3s linear infinite;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1;
    }

    80% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

• .heart #line 和 .heart #point 分别为两个路径元素定义了样式，包括颜色、线宽、线帽和线连接的风格等。
• stroke-dasharray 和 stroke-dashoffset 属性用于创建动画效果，其中 stroke-dasharray 定义了虚线的模式，stroke-dashoffset 定义了虚线的偏移量。
• animation 属性应用了一个名为 dash 的关键帧动画，该动画在 3 秒内无限循环，使路径的描边动画看起来像是在“跳动”。