曲线路径网上找的，有大神提示提示怎么用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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）