TweenMax+svg+snap实现文字字母拆分合并显示动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg+snap实现文字字母拆分合并显示动画效果代码
代码标签： TweenMax svg snap 文字 字母 拆分 合并 显示 动画
下面为部分代码预览，完整代码请点击下载或在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-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
</script>
<script>
var SVG = Snap('#svg');
var container = $('.container');
var toggle = $('#toggle a');
var stage = Snap('#stage');
var colors = ['#f80c12', '#ff9933', '#d0c310', .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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