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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0