svg实现手拿笔画一个爱心表白动画效果代码
代码语言:html
所属分类:动画
代码描述:svg实现手拿笔画一个爱心表白动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ margin: 0 auto; background:#fdd; } svg{ height:100%; width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } */ </style> </head> <body > <svg viewbox="0 0 120 120" preserveAspectRatio="auto"> <path d="M 95 65 L 60 100 L 25 65 A 25 25 90 0 1 60 29 A 25 25 90 0 1 95 65 Z" fill="none" stroke="red" stroke-width="2" stroke-dasharray="256.755" stroke-dashoffset="256.755"> <animate attributeName="stroke-dashoffset" dur="10s" values="256.755; 0" repeatCount="indefinite"/> </path> <path class="penTip" d="M 3 -7 L 0 -1" stroke="#d00" stroke-linecap="round" stroke-width="3"> <animateMotion dur="10s" repeatCount="indefinite" path="M 95 65 L 60 100 L 25 65 A 25 25 90 0 1 60 29 A 25 25 90 0 1 95 65 Z" /> </path> <path class="pen" d="M 3 -7 L 39 -85" fill="none" stroke="#000" stroke-linecap="round" stroke-width="7.........完整代码请登录后点击上方下载按钮下载查看
网友评论0