snap+TweenMax+svg实现可输入彩色火柴拼凑字母显示文字动画效果代码
代码语言：html
所属分类：动画
代码描述：snap+TweenMax+svg实现可输入彩色火柴拼凑字母显示文字动画效果代码，可输入字母实时动画拼凑显示。
代码标签： snap TweenMax svg 输入 彩色 火柴 拼凑 字母 显示 文字 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import 'https://fonts.googleapis.com/css?family=Catamaran';
html,
body,
.background {
width: 100%;
height: 100%;
}
.background {
position: relative;
background: linear-gradient(120deg, rgba(50, 150, 100, 0.6), rgba(0, 0, 100, 0));
}
.background:before, .background:after {
position: absolute;
content: " ";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, rgba(0, 0, 200, 0.6), rgba(0, 0, 200, 0));
}
.background:after {
background: linear-gradient(240deg, rgba(150, 50, 50, 0.6), rgba(0, 0, 200, 0));
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Catamaran", sans-serif;
}
body {
background: #eeeeff;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
svg {
z-index: 10;
}
svg .letter {
fill: none;
stroke: #fff;
stroke-width: 5;
stroke-miterlimit: 10;
}
.blinky-mcblinkface {
-webkit-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@-webkit-keyframes "blink" {
from, to {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes "blink" {
from, to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#toggle {
position: fixed;
top: 10px;
left: 10px;
z-index: 100;
}
#toggle a {
color: white;
text-decoration: none;
}
#toggle a:hover {
color: #eee;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container background">
<svg id="svg">
<defs>
<g id="letter-z">
<path class="letter" d="M16.3,24.5l-29.1-2.1l29.1-39.5h-29.1"/>
</g>
<g id="letter-y">
<path class="letter" d="M-11.8-14.2L5.9,1.4"/>
<path class="letter" d="M15.2-20.9L-5.3,28.3"/>
</g>
<g id="letter-x">
<path class="letter" d="M18.8-10.5l-34.2,35.4"/>
<path class="letter" d="M-11-19.5l26.7,46.4"/>
</g>
<g id="letter-w">
<path class="letter" d="M22.8-14.4L7.4,21.7L-2.4,7.6l-10.2,14.1l-6.8-34"/>
</g>
<g id="letter-v">
<path class="letter" d="M16.1-16.3l-13.5,40l-15.2-40"/>
</g>
<g id="letter-u">
<path class="letter" d="M-14.5-18.9v34.3c0,0,0.2,10.1,7.7,10.6s17.3,0,17.3,0s7.7-1.6,7.4-9.7c-0.3-8.1,0-35.2,0-35.2"/>
</g>
<g id="letter-t">
<path class="letter" d="M-17.7-17.7h38.8"/>
<path class="letter" d="M1.1,25l0.6-42.7"/>
</g>
<g id="letter-s">
<path class="letter" d="M13.8-10.3c-1.6-4.3-5.9-7.5-11.1-8c-6.5-0.6-12,3.2-13.9,7.4c-1.7,3.8-0.5,8,2,10.8c4.3,4.8,8.7,5.4,17.3,8
c5.3,1.6,7.8,5.5,6.9,10.2c-0.7,3.9-5.4,6.7-9.7,7.4c-6.5,1-14-2.8-17.3-9.7"/>
</g>
<g id="letter-r">
<path class="letter" d="M-10.8,28.6l0.7-49.2v-0.2c9.6-2.5,19.4,1.1,22.9,7.7c2.6,4.8,2,11.7-3.5,16.1C3.9,7.3-4.4,7.9-10.8,4.3"/>
<path class="letter" d="M0.1,6.6l14.2,22.2"/>
</g>
<g id="letter-q">
<path class="letter" d="M0,22c-9.6,0-16.8-10.3-16.6-19.7c0.2-9.5,8-19.2,17.3-18.9C10.5-16.2,17.5-5,16.5,4.7C15.8,12.9,9,22,0,22z
"/>
<path class="letter" d="M0.3,4.3C9.8,19.6,11.8,23.2,20,24"/>
</g>
<g id="letter-p">
<path class="letter" d="M-13.3-17.6c18,2.8,30.1,8.6,30,13.4c-0.2,4.6-11.4,9-26,11"/>
<path class="letter" d="M-10.7,25l4.6-39"/>
</g>
<g id="letter-n">
<path class="letter" d="M15.4-17.6L14.6,21L-12-7.4V25"/>
</g>
<g id="letter-m">
<path class="letter" d="M26.7,27.3L11.4-20L-1.8,2.9l-8.7-18.1L-23.3,21"/>
</g>
<g id="letter-l">
<path class="letter" d="M13.3,26.1H-9.9v-44.9"/>
</g>
<g id="letter-k">
<path class="letter" d="M-9.7-18.8l0.8,44.9"/>
<path class="letter" d="M3.8-16.4L-9.3,5.8"/>
<path class="letter" d="M13.1,19.3L-9.3,5.8"/>
</g>
<g id="letter-j">
<path class="letter" d="M4.5-13c4.7,24.3,4.7,37.4,0,39.4C1.3,27.8-4,24-11.3,15.4"/>
<path class="letter" d="M-8.1-7.9l22.9-11.4"/>
</g>
<g id="letter-i">
<path class="letter" d="M1.7-18.8v44.9"/>
</g>
<g id="letter-h">
<path class="letter" d="M-9.7-16.7l0,40.7"/>
<path class="letter" d="M13.9-16.7l0,40.7"/>
<path class="letter" d="M13.9,7.5l-24.4,0"/>
</g>
<g id="letter-g">
<path class="letter" d="M7.8,3.4l10.3,0.3v20c-9.7,5.4-21,5-28.4-0.8C-21.9,13.6-21.4-8-8.7-16.5c8.6-5.8,21.3-4.7,30.7,3.2"/>
</g>
<g id="letter-f">
<path class="letter" d="M20.9-17.2l-28.1,0.8l1.6,41"/>
<path class="letter" d="M4.7,0.9l-22.2,0.8"/>
</g>
<g id="letter-e">
<path class="letter" d="M8.4,3.6l-21.3,0.5"/>
<path class="letter" d="M16.3-18.9l-24.4,0.8l-0.8,44.5l22.9-0.2"/>
</g>
<g id="letter-d">
<path class="letter" d="M-6.6-20.1l-1.6,47.5"/>
<path class="letter" d="M-18.4-11.4c13.7-9.6,31.1-6,37.8,4.7c5,8,4.1,19.5-2.4,26.8c-8.4,9.3-24.8,10.2-36.3,0"/>
</g>
<g id="letter-o">
<path class="letter" d="M1.7,23c-9.6,0-16.8-10.3-16.6-19.7c0.2-9.5,8-19.2,17.3-18.9C12.2-15.2,19.2-4,18.2,5.7
C17.4,13.9,10.7,23,1.7,23z"/>
</g>
<g id="letter-c">
<path class="letter" d="M18.2-13.6c0,0-27.3-21.4-32.5,17.1s32.5,17.7,32.5,17.7"/>
</g>
<g id="letter-a">
<path class="letter" d="M-12.2,27.5L0.5-20.1l18.6,43.8"/>
<path class="letter" d="M-15.6,12.4l34.7-8.7"/>
</g>
<g id="letter-b">
<path class="letter" d="M-4.5-16.5l-2.6,44.6"/>
<path class="letter" d="M-20.1-9.6c0,0,26.9-19.5,34.7-6.9C20.9-6.4,0,1.7,0,1.7s23.7-6.5,23.5,11.7c-0.3,25.7-39.4,6.8-39.4,6.8"/>
</g>
</defs>
<g id="stage"></g>
</svg>
</div>
<div id="toggle"><a href="#">Loading</a></div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snap.svg-0.4.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script>
;(function() {
var icon = '<svg class="sg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.31 251.89"><path d="M66.8,144.17c0-66.24,22.46-113.09,80.72-112.32,81.48,1.07,80.72,46.08,80.72,112.32,0,5.15,8.38,3.81,7.62,19-2.28,19.42-9.44,14.63-10.39,19.85-9.26,51.08-40.65,88.67-77.95,88.67-37.76,0-69.47-38.53-78.28-90.58-.82-4.85-5.86-.8-6.42-18.68C61.47,146.07,66.8,149.07,66.8,144.17Z" transform="translate(-56.6 -25.84)" style="fill:#ffdfbf;fill-rule:evenodd"/><path d="M147.52,31.85C99.49,31.22,75.79,63,69,111.24c8.78-23.84,27.86-26,64.33-26.54,70.62-1.13,88.39,8.27,79.64,96.55-1.84,18.6-6.1,24.62-28.36,39.74-12.07,8.2,18.54-26.37-49.78-27-49.5-.43-30.06,36.41-40.06,29.44a81.88,81.88,0,0,1-20.28-20.73c12.89,40.76,40.76,69,73.08,69,37.3,0,68.69-37.59,77.95-88.67l2.77-38.89C228.24,77.93,229,32.91,147.52,31.85Z" transform="translate(-56.6 -25.84)" style="fill:#d0b57b;fill-rule:evenodd"/><path d="M146.13,31.84h1.39c81.48,1.07,80.72,46.08,80.72,112.33,0,5.15,8.38,3.81,7.62,19-2.28,19.42-9.44,14.63-10.39,19.85-9.26,51.08-40.65,88.67-77.95,88.67-37.76,0-69.47-38.53-78.28-90.58-.82-4.85-5.86-.8-6.42-18.68-1.34-16.39,4-13.39,4-18.29,0-65.71,22.11-112.33,79.33-112.33m0-6h0c-29.39,0-51.65,11.54-66.18,34.3C67.3,80,60.86,108.06,60.8,143.68h0c-2.54,3.05-4.94,7-4,19.12.4,12.11,2.72,16.46,6.59,19.86,9.65,56,44.19,95.07,84.11,95.07,19.91,0,38.59-9.42,54-27.25,14.35-16.57,24.87-39.79,29.66-65.45l0,0c4.22-2.57,8.87-6.53,10.58-21.1l0-.2v-.2c.58-11.55-3.35-16.18-7.07-19.61l-.53-.5v-1c0-33,0-61.46-10.76-82.11-12-23-36.09-33.89-75.88-34.41Z" transform="translate(-56.6 -25.84)" style="fill:#303030"/><path d="M118.31,183.29s4.28,4.28,12.84,4S143.67,182,143.67,182s-3.62,8.23-11.53,8.89S118.31,183.29,118.31,183.29Z" transform="translate(-56.6 -25.84)" style="fill:#bfa78f;fill-rule:evenodd"/><ellipse cx="44.24" cy="115.64" rx="28.15" ry="35.97" style="fill:#fff"/><ellipse cx="104.54" cy="115.64" rx="28.15" ry="35.97" style=&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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