gsap实现文字字母逐个生长动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap实现文字字母逐个生长动画效果代码，相信自己
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #001233;
}
.support {
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
display: flex;
}
.support a {
margin: 0 10px;
color: #fff;
font-size: 1.8rem;
backface-visibility: hidden;
transition: all 150ms ease;
}
.support a:hover {
transform: scale(1.1);
}
</style>
</head>
<body >
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.29166 132.29167">
<defs>
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="0" flood-color="#000" flood-opacity=".5" />
</filter>
</defs>
<defs id="morphs">
<g id="believe_in">
<path d="m 27.37247,31.245801 c 0,-1.354046 0.299759,-2.031067 -2.757778,-3.234663 2.997585,-1.153445 2.757778,-1.780317 2.757778,-3.184512 v -3.134361 c 0,-1.153446 0.239807,-2.532566 -1.318936,-3.209589 -1.678649,-0.702097 -5.455607,-0.576722 -7.613868,-0.576722 h -2.577924 v 46.693775 h 2.577924 c 2.158261,0 5.935219,0.100306 7.613868,-0.576718 1.558743,-0.677028 1.318936,-2.056148 1.318936,-3.209592 z m -6.474783,-5.967827 v -3.761235 h 0.539564 c 1.01918,0 0.899277,0.451348 0.899277,0.576722 v 2.582716 c 0,0.150449 0.203853,0.601797 -0.899277,0.601797 z m 0,35.710972 v -30.21957 h 0.539564 c 1.01918,0 0.899277,0.45135 0.899277,0.601799 v 29.015969 c 0,0.150451 0.119904,0.601802 -0.899277,0.601802 z" id="path1077" />
<path d="m 28.314139,17.905954 v 46.693775 h 9.472372 V 59.48445 H 33.350084 V 30.493553 h 3.529852 v -5.11528 h -3.529852 v -2.357039 h 4.436427 v -5.11528 z" id="path1079" />
<path d="m 38.347463,17.905954 v 46.693775 h 9.472373 V 59.48445 H 43.38341 V 17.905954 Z" id="path1081" />
<path d="m 53.776452,17.905954 h -5.035944 v 46.693775 h 5.035944 z" id="path1083" />
<path d="m 54.377328,17.905954 v 46.693775 h 9.472371 V 59.48445 H 59.413272 V 30.493553 h 3.529852 v -5.11528 h -3.529852 v -2.357039 h 4.436427 v -5.11528 z" id="path1085" />
<path d="M 73.418016,17.905954 71.439609,30.925012 69.461203,17.905954 h -5.035944 l 2.997586,46.693775 h 8.093481 l 2.997586,-46.693775 z" id="path1087" />
<path d="m 79.415843,17.905954 v 46.693775 h 9.472372 V 59.48445 H 84.451788 V 30.493553 h 3.529852 v -5.11528 h -3.529852 v -2.357039 h 4.436427 v -5.11528 z" id="path1089" />
<path d="m 101.14089,17.905954 h -5.035944 v 46.693775 h 5.035944 z" id="path1091" />
<path d="m 101.62187,17.905954 v 46.693775 h 5.70271 l -0.66677,-36.302392 2.87038,36.302392 h 6.90174 V 17.905954 h -5.7027 l 0.66677,9.844061 -2.87039,-9.844061 z" id="path1093" />
</g>
<g id="yourself">
<path d="m 15.937407,66.373116 4.681067,23.679851 v 24.129783 h 5.313644 V 90.052967 L 31.688566,66.373116 H 25.86886 L 23.654843,80.395797 21.757112,66.373116 Z" id="path1097" />
<path d="m 31.841404,68.622013 v 43.338297 c 0,1.40226 2.72008,2.4341 6.199252,2.4341 3.415915,0 6.199252,-1.00539 6.199252,-2.4341 V 68.622013 c 0,-1.428709 -2.783337,-2.434099 -6.199252,-2.434099 -3.479172,0 -6.199252,1.031841 -6.199252,2.434099 z m 5.313644,41.727967 V 70.232337 c 0,-0.185202 0.379546,-0.370404 0.885608,-0.370404 0.442804,0 0.885608,0.132277 0.885608,0.370404 v 40.117643 c 0,0.23812 -0.442804,0.37041 -0.885608,0.37041 -0.506062,0 -0.885608,-0.1852 -0.885608,-0.37041 z" id="path1099" />
<path d="m 45.634982,66.373116 v 45.798854 c 0,1.40225 2.783338,2.22244 6.199252,2.22244 3.415914,0 6.26251,-0.79373 6.26251,-2.22244 V 66.373116 h -5.376903 v 43.976864 c 0,0.23812 -0.379547,0.37041 -0.885607,0.37041 -0.506063,0 -0.82235,-0.1852 -0.82235,-0.37041 V 66.373116 Z" id="path1101" />
<path d="M 64.425924,101.61897 V 70.100047 h 0.569321 c 1.075379,0 0.948863,0.476236 0.948863,0.608527 v 30.301866 c 0,0.21166 0.06327,0.60853 -0.948863,0.60853 z m 0,5.09914 h 0.569321 c 1.012122,0 0.948863,0.39687 0.948863,0.60852 v 6.85612 h 5.313646 v -6.53503 c -0.06327,-1.50809 0.25303,-2.14307 -2.909853,-3.38658 3.22614,-1.21705 2.909853,-1.87849 2.909853,-3.36011 V 70.368213 c 0,-1.217045 0.25303,-2.67222 -1.391669,-3.38657 -1.771215,-0.740819 -5.756448,-0.608527 -8.033725,-0.608527 h -2.720079 v 47.809634 h 5.313643 z" id="path1103" />
<path d="M 77.302675,100.05797 V 70.232337 c 0,-0.185202 0.379546,-0.370404 0.885607,-0.370404 0.442804,0 0.885607,0.132277 0.885607,0.370404 v 29.610376 h 5.313646 V 68.436811 c 0,-1.53454 -2.78334,-2.248897 -6.199253,-2.248897 -3.47917,0 -6.19925,0.82018 -6.19925,2.248897 v 34.735979 c 0,0.8731 -0.06327,1.79911 1.138637,2.35473 0.82235,0.42331 1.6447,0.50269 3.099627,0.50269 h 1.391666 c 1.39167,0 1.454927,0.21166 1.454927,0.74081 v 3.57896 c 0,0.18521 -0.379546,0.37041 -0.82235,0.37041 -0.50606,0 -0.948864,-0.13229 -0.948864,-0.37041 v -3.12559 h -5.313643 v 4.94758 c 0,1.50808 2.783337,2.22244 6.262507,2.22244 3.415916,0 6.135996,-0.82019 6.135996,-2.22244 v -8.48931 c 0,-0.89956 0,-1.82557 -1.075382,-2.38119 -0.822348,-0.39686 -1.834471,-0.50269 -3.099624,-0.50269 h -1.39167 c -1.454926,0 -1.518184,-0.21165 -1.518184,-0.74081 z" id="path1105" />
<path d="m 85.052582,66.373116 v 47.809634 h 9.99471 v -5.23143 h -4.681067 v -2.92111 h 3.76127 v -5.23143 h -3.76127 V 71.604542 h 4.681067 v -5.231426 z" id="path1107" />
<path d="m 95.786262,66.373116 v 47.809634 h 9.994718 v -5.23143 h -4.68107 V 66.373116 Z" id="path1109" />
<path d="m 106.35923,114.18275 h 5.37689 v -8.15254 h 3.69801 v -5.23143 h -3.69801 V 71.604542 h 4.61782 v -5.231426 h -9.99471 z" id="path1111" />
</g>
</defs>
<g.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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