gsap实现文字字母逐个生长动画效果代码-html代码-BFW代码库

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&amp;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.5298.........完整代码请登录后点击上方下载按钮下载查看