gsap+svg文字单词入场动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg文字单词入场动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #293A4B;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
#ringGroup circle {
filter: url(#glow)
}
</style>
</head>
<body >
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#293A4B" flood-opacity="0.4"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="shadow" x="-100%" y="-100%" width="250%" height="250%">
<feOffset in="SourceAlpha" dx="4" dy="4" result="offsetOut"></feOffset>
<feGaussianBlur stdDeviation="4" in="offsetOut" result="drop" />
<feBlend in="SourceGraphic" in2="drop" mode="normal" />
</filter>
<clipPath id="maskR">
<rect class="maskR" x="398.03" y="183.39" width="339.72" height="255.77" fill="red" />
</clipPath>
<clipPath id="maskL">
<rect class="maskL" x="62.25" y="183.39" width="335.78" height="255.77" fill="red" />
</clipPath>
<g id="believeText" fill="#FFF">
<path id="dot" d="M397.95,237.54c10.38,0,18.88,7.87,18.88,18.25s-8.5,17.93-18.88,17.93-18.72-7.55-18.72-17.93,8.34-18.25,18.72-18.25Z" />
<path id="i" d="M420.14,288.36c0,5.98-4.09,17.93-4.09,34.14,0,11.48,3.15,21.71,3.15,29.58,0,4.88-3.78,9.44-12.74,9.44-14,0-25.96-5.82-25.96-11.96s3.62-19.04,3.62-30.68-4.09-17.15-4.09-23.91c0-8.34,16.36-15.42,29.73-15.42,6.29,0,10.38,2.99,10.38,8.81Z" />
<g id="leftChars" clip-path="url(#maskL)">
<g>
<path d="M194.24,276.56c0,15.1-9.28,22.65-9.28,23.44,0,.94,19.82,4.88,19.82,25.33s-20.77,37.13-44.36,37.13-37.13-7.87-39.02-11.64c-3.3-6.61-5.82-27.53-5.82-48.93s1.89-41.69,7.24-44.83c6.14-3.62,17.46-6.76,31.46-6.76,26.11,0,39.96,11.17,39.96,26.27Zm-44.36-2.67c-1.57,.79-1.89,9.12-1.89,11.17s.79,3.78,3.78,3.78c5.98,0,11.33-4.41,11.33-10.07,0-3.78-2.05-6.76-6.29-6.76-2.04,0-5.35,.94-6.92,1.89Zm1.1,47.51c0,.63-.16,3.15-.16,5.82,0,2.05,.16,4.09,.31,5.51,.47,2.36,1.89,2.67,4.56,2.67,5.66,0,12.27-3.46,12.27-8.97,0-5.19-4.41-8.18-9.91-8.18-2.83,0-7.08,1.42-7.08,3.15Z" />
</g>
<g>
<path d="M278.56,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
</g>
<g>
<path d="M342.74,256.74c0,3.3-6.14,36.81-6.14,54.9,0,13.06,2.67,15.42,8.34,15.42,13.37,0,21.87-10.54,24.7-10.54,2.52,0,4.88,1.57,4.88,8.18,0,14.95-.94,25.64-15.42,31.15-11.17,4.25-20.14,4.56-29.73,4.56s-23.6-2.04-27.53-10.07c-2.99-5.98-4.72-30.05-4.72-48.45,0-24.54,2.36-40.43,9.28-44.21,8.34-4.56,23.28-7.55,28.63-7.55,4.72,0,7.71,3.15,7.71,6.61Z" />
</g>
</g>
<g id="rightChars" clip-path="url(#maskR)">
<g>
<path d="M672.62,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
</g>
<g>
<path d="M600.73,266.02c0,9.6-2.99,34.77-10.7,56.48-7.87,21.87-12.74,28.16-21.55,32.41-8.97,4.25-20.77,5.66-25.8,5.66-6.76,0-14-5.66-19.98-15.73-7.71-12.9-18.41-40.75-18.41-66.7,0-9.44,8.02-13.37,18.56-18.56,8.65-4.25,16.05-4.56,18.25-4.56,2.36,0,5.66,2.04,5.66,6.61s-1.57,31.15-1.57,44.05,3.62,17.78,5.66,17.78c1.89,0,9.6-12.27,9.6-31.94,0-17.15-3.15-22.97-3.15-27.06s25.17-13.53,32.72-13.53,10.7,5.66,10.7,15.1Z" />
</g>
<g>
<path d="M492.34,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
</g>
</g>
</g>
<mask id="ringMask">
<use class="believeText" href="#believeText" />
</mask>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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