TweenMax+svg实现情人节文字爱心表白动画效果代码
代码语言:html
所属分类:表白
代码描述:TweenMax+svg实现情人节文字爱心表白动画效果代码
代码标签: TweenMax svg 情人节 文字 爱心 表白 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { overflow: hidden; background: radial-gradient(circle at center, red, #670000); } #scene { width: 100%; height: 100%; } </style> </head> <body> <!-- partial:index.partial.html --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="453.5px" height="453.5px" viewBox="0 0 453.5 453.5" overflow="scroll" enable-background="new 0 0 453.5 453.5" xml:space="preserve" id="scene"> <defs> <symbol id="heart"> <path d="M16.6,0c-4.6-0.3-5.9,3.2-5.9,3.2S7.9-1.1,4,0.4C0.1,1.8-2.7,8.5,4.3,14.3c5.4,4.5,6.2,4.5,6.2,4.5 s0.8,0,6.7-4.8C24,8.3,21.2,0.4,16.6,0z M16.5,13.7c-5.6,4.6-6,4.6-6,4.6S10.2,18.4,5,14C-1.6,8.4,0.5,2.2,4.3,0.8 c3.7-1.4,6.4,3.5,6.4,3.5s1.3-4.1,5.7-3.8C20.8,0.8,23,8.3,16.5,13.7z"/> </symbol> </defs> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <svg class='heart-path'> <use fill="none" xlink:href="#heart"></use> </svg> <g> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M237.4,150.5c1.9-4.3,3.6-7.5,5.1-9.7c1.5-2.2,2.9-3.5,4.1-4c1.3-0.5,2.2-0.7,2.6-0.7 c0.5,0,0.7,0.1,0.7,0.2c0,0.1-0.3,0.3-0.8,0.6c-0.5,0.3-1.4,1.3-2.7,3.1c-1.3,1.8-2.8,4.6-4.7,8.4c-1.9,3.8-3.6,7.8-5,12 c2.4,0,4-0.1,4.6-0.4c0.7-0.2,1.1-0.3,1.2-0.1c0.1,0.2-0.1,0.4-0.6,0.8c-1.3,0.9-3.2,1.5-5.8,1.6c0,0.1-0.4,1-1,2.9 c-2,6.2-3,10.5-3,12.9c0,1.4,0.2,2.4,0.7,2.9c0.5,0.6,1,0.8,1.6,0.8c0.6,0,1.2-0.2,1.8-0.7c2.3-1.7,4.7-5.3,7.5-10.8 c0.3-0.7,0.6-1,0.9-0.8c0.3,0.1,0.3,0.5,0,1.3c-1.5,3.1-2.7,5.4-3.7,6.9c-1,1.5-2.1,2.8-3.3,4.1c-1.6,1.5-3.3,2.3-4.9,2.3 c-1.8,0-3.1-0.8-3.8-2.3c-0.4-0.7-0.5-1.4-0.5-2c0-0.6,0-1.2,0-1.9c0-0.7,0.1-1.5,0.2-2.6c0.1-1.1,0.4-2.4,0.9-3.9 c0.5-1.6,0.8-2.8,1.1-3.6c0.3-0.8,0.6-1.9,1.2-3.3c0.5-1.4,0.8-2.1,0.8-2.3c-1.7,0-8.4-0.3-20.2-0.8c-2.4,7.2-6.2,13.7-11.4,19.4 c-2.5,2.8-5.5,5.2-8.9,7.1c-4.5,2.5-9.3,3.8-14.3,3.8c-2.1,0-4.5-0.3-7-0.9c-2.6-0.6-5-1.8-7.3-3.5c-2.3-1.7-3.9-4.1-4.9-7 c-1-2.9-1-6.2-0.1-9.8c0.5-1.8,1.5-3.5,3.2-5.1c1.6-1.6,3-2.4,4.1-2.4c0.4,0,0.6,0.1,0.7,0.1c0.1,0.1,0,0.2-0.1,0.4 c-0.1,0.1-0.3,0.2-0.5,0.3c-1.2,0.5-2.4,1.6-3.7,3.4c-1.7,2.3-2.5,5-2.5,8c0,4.8,2.3,8.3,6.9,10.7c2.8,1.4,6,2.1,9.8,2.1 c1.6,0,3.2-0.2,4.6-0.5c13.5-3,22.9-11.7,28.4-26.2c-1,0-2,0.2-3,0.7c-1,0.5-1.6,0.7-1.9,0.7c-0.3,0-0.5-0.1-0.5-0.4 c0-0.7,0.5-1.3,1.4-1.9c1-0.6,1.8-1,2.5-1h2.3c2.5-6.4,5.4-12.8,8.7-19.3c-1,0.1-2.5,0.3-4.4,0.4c-1.9,0.2-3.5,0.3-4.6,0.4 c-1.2,0.1-2.7,0.3-4.4,0.6c-1.7,0.3-3.2,0.6-4.4,1c-1.2,0.4-2.4,0.9-3.8,1.6c-1.4,0.7-2.6,1.5-3.5,2.3c-2.3,2.1-3.9,4.8-4.8,7.9 c-0.4,1.3-0.6,2.6-0.6,4.1c0,1.4,0.5,2.8,1.5,4.2c1,1.4,2.4,2,4.1,2c3.4,0,5.8-1.9,7.2-5.8c0.7-1.8,1-3.1,1-3.8 c0-0.7-0.1-1.3-0.4-1.7c-0.3-0.4-0.2-0.6,0.2-0.7c0.3,0,0.5,0.1,0.7,0.5c0.5,1,0.7,2.1,0.7,3.3c0,1.2-0.4,2.5-1.2,3.9 c-1.4,2.5-3.2,4.1-5.5,4.9c-1.1,0.4-2.2,0.6-3.3,0.6c-1.1,0-2.2-0.2-3.3-0.7c-2.1-0.9-3.7-2.5-4.6-4.6c-0.6-1.3-1-2.6-1-3.8 c0-1.2,0.2-2.6,0.6-4.1c0.4-1.5,1.1-3.1,2.2-4.7c1.1-1.6,2.5-2.9,4.2-3.8c1.7-1,3.3-1.8,5-2.4c1.7-0.6,3.6-1.1,5.9-1.4 c2.3-0.3,4.3-0.6,6-0.7c1.7-0.2,3.7-0.3,6.1-0.4c2.4-0.1,4.2-0.2,5.3-0.4c0.4-0.8,1.1-1.7,2-2.8c0.9-1.1,1.7-1.7,2.3-1.9 c0.6-0.2,1.1-0.3,1.5-0.3c1.5,0,2.2,0.6,2.2,1.9s-0.8,2.3-2.4,3.1c-1.6,0.8-3.2,1.3-4.6,1.3c-1.1,2.1-2.6,5.8-4.6,11.1 c-2,5.3-3,8.1-3.1,8.4c3,0,6.8,0.2,11.5,0.5c4.7,0.3,7.6,0.5,8.7,0.5C234.1,158.1,235.5,154.8,237.4,150.5z M224.9,135.6 c-0.5,0-1.5,1-3,2.9c2.6-0.4,3.9-1.1,3.8-2.1c0-0.4-0.3-0.7-0.7-0.8C225,135.6,225,135.6,224.9,135.6z" /> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M258.4,164.7c-1.2,2.3-1.9,4-2.1,5.1c-0.2,1.1-0.4,2.1-0.4,2.8c0,0.7,0.3,1.1,0.8,1.1 c0.7,0,1.5-0.6,2.5-1.9c1.5-1.8,2.9-4.2,4.4-7.2c0.1-0.3,0.3-0.5,0.5-0.5c0.3-0.1,0.4,0,0.4,0.3c0,0.2-0.1,0.4-0.2,0.6 c-3.3,6.7-6.1,10.1-8.4,10.1c-1,0-1.9-0.5-2.5-1.5c-0.3-0.5-0.5-1.3-0.5-2.2c0-0.9,0.2-2,0.5-3.3c-2.9,4.6-5.4,7-7.5,7 c-0.6,0-1.1-0.2-1.6-0.5c-1.1-0.8-1.6-2.1-1.6-3.9c0-3.5,1.5-7.1,4.6-10.8c1.7-2,3.9-3.3,6.4-3.9c0.7-0.2,1.3-0.3,1.9-0.3 c1.7,0,3.1,0.6,4.2,1.7c0.4,0.4,0.5,0.8,0.3,1.1c-0.1,0.4-0.5,0.5-0.9,0.4c-0.4-1.3-1.3-1.9-2.6-1.9c-1.6,0-3.5,1.2-5.7,3.7 c-1.3,1.4-2.5,3.1-3.6,5.1c-1.4,2.3-2.1,4.2-2.1,5.6c0,1.4,0.5,2.1,1.4,2.1c2.2,0,5-3.3,8.5-9.9c0.7-1.3,1.3-2.2,1.7-2.7 c0.5-0.5,1.1-0.7,1.8-0.7c0.1,0,0.5,0.1,1.1,0.2c0.6,0.1,1,0.1,1.3,0.1C260.5,160.9,259.6,162.4,258.4,164.7z" /> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M279.2,165.8c0,1.8-0.5,3.8-1.4,6c-1,2.2-2.3,4.3-3.9,6.3c-1.7,2-3.7,3.4-6.1,4.1c-0.9,0.2-2,0.4-3.1,0.4 c-1.2,0-2.5-0.4-3.9-1.1l-5.9,14.7c-0.6,1.3-1.2,2.2-1.7,2.6c-0.5,0.4-1.1,0.6-1.5,0.6c-0.5,0-0.8,0-0.9,0c-0.1,0-0.5-0.1-1.1-0.2 c-0.6-0.1-1.1-0.2-1.5-0.1c0.9-0.9,3.2-5,6.9-12.3c3.7-7.4,5.8-12.3,6.3-14.9c-0.5,0.7-0.9,1-1.3,1.1c-0.2,0-0.2-0.2,0-0.7 c0.2-0.5,0.7-1.4,1.2-2.8c0.7-1.8,1.1-3.4,1.1-4.9c0-1.5-0.3-2.4-0.9-2.6c2.5-0.4,3.9-0.6,4.3-0.6c0.4,0,0.7,0.2,0.8,0.5 c0.1,0.3,0.2,0.7,0.2,1.1c0,2.5-0.6,5.3-1.7,8.4l1.2-2c1.5-2.4,2.6-3.9,3.3-4.6c0.7-0.7,1.4-1.4,2.2-2.2c1.2-1.2,2.4-1.7,3.5-1.7 c0.3,0,0.6,0,0.9,0.1C278.2,161.5,279.2,163.1,279.2,165.8z M276.3,165.2c0-0.7-0.1-1.3-0.4-1.8c-0.3-0.6-0.7-0.8-1.3-0.8 c-1.4,0-3.1,1.3-5,4c-1.9,2.7-4.7,7.4-8.3,14.1c0.5,0.5,1.3,0.8,2.2,0.8c0.9,0,2.3-0.7,4-2.2c2.8-2.3,5.1-5.2,6.9-8.6 C275.7,168.4,276.3,166.6,276.3,165.2z" /> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M301.1,159.9c0,1.6-0.4,3.3-1.2,5.2c-0.8,1.9-2,3.7-3.4,5.5c-1.5,1.8-3.2,3-5.3,3.6 c-0.8,0.2-1.7,0.3-2.7,0.3c-1,0-2.2-0.3-3.4-1l-5.1,12.8c-0.5,1.2-1,1.9-1.5,2.3c-0.5,0.4-0.9,0.5-1.4,0.5c-0.4,0-0.7,0-0.8,0 c-0.1,0-0.4-0.1-1-0.2c-0.6-0.1-1-0.1-1.3-0.1c0.8-0.8,2.8-4.4,6-10.8c3.2-6.4,5.1-10.8,5.5-13c-0.4,0.6-0.8,0.9-1.1,0.9 c-0.2,0-0.2-0.2,0-0.6c0.2-0.4,0.6-1.2,1.1-2.4c0.6-1.5,1-3,1-4.3c0-1.3-0.3-2.1-0.8-2.3c2.2-0.4,3.4-0.5,3.8-0.5 c0.4,0,0.6,0.2,0.7,0.5c0.1,0.3,0.1,0.6,0.1,1c0,2.2-0.5,4.6-1.5,7.4l1.1-1.7c1.3-2.1,2.2-3.4,2.8-4.1c0.6-0.6,1.2-1.2,1.9-1.9 c1-1,2.1-1.5,3-1.5c0.3,0,0.6,0,0.8,0.1C300.2,156.2,301.1,157.6,301.1,159.9z M298.5,159.4c0-0.6-0.1-1.1-0.4-1.6 c-0.2-0.5-0.6-0.7-1.1-0.7c-1.3,0-2.7,1.2-4.4,3.5c-1.7,2.3-4.1,6.4-7.2,12.3c0.5,0.5,1.1,0.7,1.9,0.7c0.8,0,2-0.6,3.5-1.9 c2.4-2,4.4-4.5,6.1-7.5C298,162.2,298.5,160.6,298.5,159.4z" /> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M290.7,205.6c-1.8,0-3.2-0.4-4.2-1.1c-1-0.8-1.5-1.7-1.5-2.7s0.3-2.3,0.9-3.6c1.1-2.1,3-3.8,5.8-5.1 c2.1-1,4.9-1.9,8.3-2.7c3.5-0.8,5.7-1.4,6.7-1.7c1.5-2.6,3.3-7.2,5.3-13.9c-2.4,4.2-4.4,7.1-6,8.8c-1.6,1.7-3.2,2.5-4.9,2.5 c-2.2,0-3.5-0.9-3.9-2.8c-0.2-0.3-0.2-0.7-0.1-1.3c0.1-0.6,0.1-1,0.2-1.2c0-0.2,0.2-0.6,0.4-1.2c0.2-0.6,0.4-1,0.5-1.2 c0.5-0.9,0.8-1.7,1.2-2.2c-0.7,0-0.8-0.3-0.6-1l1.1-2.2c1.4-2.7,2.6-4.9,3.5-6.8c0.4-0.9,1.2-1.3,2.4-1.3h3.8 c-0.1,0.1-0.3,0.2-0.6,0.5c-0.7,0.5-1.3,1.1-1.7,1.7c-1.5,2.6-3.3,6.2-5.6,10.9c-0.9,1.9-1.4,3.4-1.4,4.3c0,0.9,0.2,1.5,0.5,1.9 c0.3,0.4,0.7,0.6,1.3,0.6c0.8,0,1.9-0.8,3.3-2.5c2.9-3.4,6.2-8.8,9.7-16.1c0.5-0.9,1.3-1.3,2.4-1.3h3.3c-1.1,0.7-1.9,1.7-2.5,2.8 c-0.6,1.1-1.3,2.7-2,4.6c-0.7,1.9-1.6,4.5-2.7,7.7c-1.1,3.2-1.9,5.6-2.5,7.2c3.9-1.2,6.8-3.2,8.9-6.1c0.9-1.3,2.2-3.5,3.9-6.8 c0.3-0.6,0.5-0.8,0.8-0.7c0.2,0.1,0.3,0.3,0.3,0.5c0,0.2-0.3,1-1,2.4c-0.7,1.4-1.4,2.7-2.1,3.8c-0.7,1.2-1.6,2.4-2.7,3.6 c-1.1,1.2-2.3,2.2-3.7,2.9c-1.4,0.7-3.2,1.5-5.4,2.3c-3.2,5.8-6.4,10-9.6,12.7C297.5,204.4,294.2,205.6,290.7,205.6z M287.1,199.5 c-0.5,0.9-0.7,1.7-0.7,2.5c0,0.8,0.3,1.3,0.9,1.8c0.6,0.4,1.3,0.6,2.2,0.6c2.4,0,4.9-1.2,7.7-3.7c2.7-2.4,5.1-5.1,7.2-7.9l1.4-2.3 c-6.8,1.8-11.1,3-12.8,3.8C290.2,195.5,288.3,197.2,287.1,199.5z" /> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M139.7,242c-0.5,0-1-0.1-1.5-0.2c-2.6-0.5-4-2.8-4-7c0-6.7,3.4-18.2,10.2-34.5c2.6-6.1,4.6-12.1,5.8-17.9 c0.5-2.2,0.7-4,0.7-5.4c0-1.3-0.1-2.4-0.2-3.2c-0.3-2.4-1.2-4.1-2.7-5c-2.7-1.5-5.8-2.2-9.2-2.2c-3.6,0-7.3,0.9-11.3,2.6 c-3.9,1.8-7.7,3.9-11.2,6.4c-3.5,2.5-6.7,5.5-9.5,9c-2.9,3.5-5,7.1-6.4,10.9c-1.4,3.8-2.1,7.3-2.1,10.3c0,1.3,0.1,2.5,0.3,3.6 c0.9,3.8,2.5,6.6,4.9,8.5c2.4,1.9,5.3,2.8,8.6,2.8c4.6,0,8.9-2,13-6.1c4-4.1,6-8.4,6-12.9c0-2.5-0.5-4.3-1.5-5.3 c-1-1.1-2-1.6-3-1.6c-1,0-2.1,0.2-3.1,0.5c-1,0.3-1.6,0.3-1.6-0.1c0-0.4,0.6-0.8,1.9-1.4c1.3-0.6,2.6-0.9,3.9-0.9s2.6,0.4,3.8,1.2 c2.1,1.6,3.2,4.1,3.2,7.5c0,3.3-1.3,6.7-3.8,10.1c-2.6,3.4-5.7,6.1-9.4,8.1c-3.7,2.1-7.4,3.1-11.1,3.1c-3.6,0-7-1.3-10.2-4 c-3.1-2.7-5.2-6.2-6.3-10.7c-0.3-1.3-0.4-2.7-0.4-4.2c0-3.5,0.9-7.2,2.6-11.3c1.7-4.1,4.2-7.8,7.4-11.3c3.2-3.5,6.7-6.4,10.4-8.7 c3.7-2.3,7.7-4.3,11.8-5.8c4.2-1.6,8.1-2.4,11.8-2.4c3.7,0,7,0.6,10,1.7c5.3,2.3,8,7.2,8,14.6c0,5.5-2,12.3-5.9,20.4 c-2.5,5-4.7,10.5-6.6,16.3c-2.9,8.6-4.3,14.6-4.3,17.9c0,2.5,0.9,3.8,2.6,3.8c3.4,0,9.4-4.4,17.9-13.2c6-6.2,10.7-13,14.1-20.4 c2.2-4.7,3.3-9.1,3.3-13c0-2.1-0.2-3.6-0.5-4.4c-0.3-0.9-0.5-1.4-0.7-1.6c-0.1-0.2-0.3-0.5-0.7-0.7c-0.3-0.2-0.5-0.3-0.7-0.3 c-0.8-0.2-1.6-0.4-2.4-0.5c-0.8-0.1-1.3-0.5-1.4-1.1c-0.1-0.6,0.1-1,0.9-1.1l1.6,0.2c2.5,0.7,4.7,2.5,6.6,5.3 c1,1.6,1.6,3.5,1.6,5.7c0,2.2-0.5,4.8-1.6,7.9c-2.5,6.7-6.4,13.3-11.7,19.8c-5.3,6.5-10.5,11.5-15.6,14.9 C147.1,240.3,142.9,242,139.7,242z" /> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M190.8,222.8c-1.6,3.1-2.6,5.5-2.9,7c-0.3,1.6-0.5,2.8-0.5,3.8s0.4,1.4,1.1,1.4c0.9,0,2.1-0.9,3.5-2.6 c2-2.5,4-5.8,6-9.8c0.2-0.4,0.4-0.7,0.7-0.7c0.4-0.1,0.6,0,0.6,0.4c0,0.2-0.1,0.5-0.2,0.9c-4.5,9.1-8.3,13.7-11.4,13.7 c-1.4,0-2.6-0.7-3.5-2.1c-0.4-0.7-0.7-1.7-0.7-3s0.2-2.7,0.7-4.5c-3.9,6.3-7.3,9.5-10.2,9.5c-0.8,0-1.5-0.2-2.1-0.7 c-1.5-1-2.2-2.8-2.2-5.3c0-4.8,2.1-9.7,6.3-14.7c2.4-2.8,5.3-4.6,8.7-5.4c0.9-0.2,1.8-0.4,2.7-0.4c2.3,0,4.2,0.8,5.8,2.4 c0.5,0.5,0.6,1.1,0.4,1.5c-0.2,0.5-0.6,0.7-1.3,0.6c-0.5-1.8-1.7-2.7-3.5-2.7c-2.1,0-4.7,1.7-7.8,5c-1.8,2-3.4,4.3-4.9,6.9 c-1.9,3.2-2.9,5.8-2.9,7.7c0,1.9,0.6,2.9,1.8,2.9c3,0,6.8-4.5,11.6-13.6c0.9-1.8,1.7-3.1,2.4-3.7c0.6-0.7,1.5-1,2.4-1 c0.2,0,0.7,0.1,1.5,0.2c0.8,0.1,1.4,0.2,1.8,0.1C193.6,217.7,192.4,219.7,190.8,222.8z" /> <path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M202.8,215.9c-0.5,1.6-1,3-1.3,4.5c-0.4,1.4-0.5,2.8-0.5,4.3c0,1.4,0.3,2.7,1,4c0.7,1.2,1.7,1.8,3.2,1.8 c2.4,0,4.7-1.6,6.9-4.8c2.2-3.2,4.6-7.3,7.1-12.2c0.5-0.9,1-1.3,1.5-1.1c0.3,0.3,0.4,0.6,0.2,1c-0.2,0.4-0.6,1.4-1.2,2.8 c-0.6,1.4-1.1,2.4-1.4,3c-0.3,0.6-0.8,1.6-1.6,3c-0.8,1.4-1.4,2.5-2,3.2c-0.6,0.7-1.3,1.6-2.3,2.7c-1,1.1-1.9,1.9-2.7,2.4 c-2.3,1.5-4.5,2.2-6.5,2.2c-2,0-3.6-0.4-4.8-1.3c-1.1-0.9-1.8-1.8-2-2.9c-0.2-1-0.3-1.9-0.3-2.7c0-0.8,0-1.8,0.1-3.1 c0.2-2.1,0.6-4.2,1.2-6.1c0.6-2,1-3.1,1-3.4c1.5-5.5,3.7-11.5,6.5-17.9c2.8-6.5,5.2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0