jquery+svg实现花朵线条绘制动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery+svg实现花朵线条绘制动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; background-color: hsl(282deg 24% 39%); overflow: hidden; } svg { width: 90vw; max-height: 90vh; } .flower { } </style> </head> <body> <!-- partial:index.partial.html --> <svg viewBox="0 0 390 390"> <path class="flower" fill="none" stroke="#fff" d="M201.22 102.42c4.2-3.08 8.6-6.42 10.55-11.25 1.52-3.74 1.37-8 2.75-11.76 2.09-5.76 7.29-9.68 11.53-14.11s7.82-10.76 5.59-16.47l-16.74 4.65a16.33 16.33 0 00-4.81 1.9c-3.43 2.29-4.59 6.74-5.25 10.81a104.61 104.61 0 00-.15 32.66c3.83-2.33 5.45-7.11 5.7-11.59.55-10-4.29-20-2.17-29.83 1.59-7.3 6.95-13.8 6.52-21.26a6.11 6.11 0 00-1.13-3.53c-2-2.44-6.12-1.5-8.31.77s-3.21 5.39-5 8c-3.82 5.42-10.55 7.74-16.65 10.33s-12.56 6.43-14.21 12.85c-1.81 7.07 3 14.09 8.25 19.17a79.2 79.2 0 0024.05 16 468.85 468.85 0 01-6.3-56.56c-.23-4.5-.49-9.3-3.15-12.95a21 21 0 01-11.44 7.13 23.85 23.85 0 00-4.75 1.23c-3.26 1.48-5 4.93-7 7.93a42.77 42.77 0 01-16.79 14.89c-3.31 1.64-6.94 2.91-9.52 5.55s-3.68 7.27-1.15 10a9.37 9.37 0 003.74 2.02c6.46 2.32 13.37 3.07 20 4.7a78.46 78.46 0 0135.94 19.92q-17.52 8-35.5 15a13.85 13.85 0 01-5.43 1.29 4.73 4.73 0 01-4.4-2.92c-1.09-3.45 3.31-6.22 3.94-9.79.52-3-1.65-6.2-.32-8.91a6.31 6.31 0 013.39-2.66 17.71 17.71 0 0111.6-.7c2.47.7 4.75 1.94 7.18 2.78 6.57 2.28 13.75 1.57 20.67.84-6.23 6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0