gsap+svg实现液态闪光2024文字动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现液态闪光2024文字动画效果代码
代码标签： gsap svg 液态 闪光 2024 文字 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #121212;
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;
}
line {
stroke-width: 120px;
mix-blend-mode: screen;
}
.line {
stroke-width: 4px;
stroke: #000;
stroke-linecap: round;
}
.dot {
mix-blend-mode: overlay;
}
</style>
</head>
<body translate="no">
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<path id="drawPath" d="M158.83,189.42c-66.31,18.08,51.2,89.35-43.2,176.82-31.35,29.05,99.4,99.48,61.29-66.24-9.63-41.86,34.91-70.64,54.11-72.24,24-2,35.55,12.33,40,24,15.27,40.08-88.3,89.95-53,123s89.15-6.69,139.45,2.47,47.51-130.52-3-149c-50.51-18.48-66.82,59-43.91,80s45.55,127.09,97.89-21.47c35-99.35,73-59,78-48s19.93,31.47-14,48c-50.13,24.42-72.19,82.61-53,83,115.06,2.33,160.52,133.12,154.52-3-2.63-59.65,24-136.53,1.65-142.97-17.29-4.98-50.45,78.94-52.18,104.67-1.1,16.38,168.32,28.19,168.39-34.23.07-58.47-80.87-51.57-118.05-125.92-31.28-62.55-14.86-91.05-58.27-98.46-68.9-11.76-22.15,202.3-188.03,71.33-67.45-53.25-62.72,19.34-168.64,48.23"/>
<circle class="dot" cx="0" cy="0" r="2"/>
</defs>
<g id="leader" />
<g id="lineContainer" />
<g id="container" />
<line class="line" x1=0 x2=0 y1=0 y2=0 />
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EasePack.3.51.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable3.min.js"></script>
<script>
gsap.config({ trialWarn: false });
let select = (s) => document.querySelector(s),
toArray = (s) => gsap.utils.toArray(s),
xmlns = "http://www.w3.org/2000/svg",
mainSVG = select("#mainSVG"),
container = select("#container"),
lineContainer = select("#lineContainer"),
pointArray = [
{
x: 239.03,
y: 214.76
},
{
x: 451.45,
y: 214.76
},
{
x: 330.48,
y: 217.23
},
{
x: 338.48,
y: 217.23
},
{
x: 346.48,
y: 217.23
},
{
x: 354.48,
y: 217.23
},
{
x: 362.48,
y: 217.23
},
{
x: 215.03,
y: 222.76
},
{
x: 223.03,
y: 222.76
},
{
x: 231.03,
y: 222.76
},
{
x: 239.03,
y: 222.76
},
{
x: 247.03,
y: 222.76
},
{
x: 255.03,
y: 222.76
},
{
x: 263.03,
y: 222.76
},
{
x: 427.45,
y: 222.76
},
{
x: 435.45,
y: 222.76
},
{
x: 443.45,
y: 222.76
},
{
x: 451.45,
y: 222.76
},
{
x: 459.45,
y: 222.76
},
{
x: 467.45,
y: 222.76
},
{
x: 475.45,
y: 222.76
},
{
x: 560.97,
y: 222.76
},
{
x: 568.97,
y: 222.76
},
{
x: 576.97,
y: 222.76
},
{
x: 584.97,
y: 222.76
},
{
x: 322.48,
y: 225.23
},
{
x: 330.48,
y: 225.23
},
{
x: 338.48,
y: 225.23
},
{
x: 346.48,
y: 225.23
},
{
x: 354.48,
y: 225.23
},
{
x: 362.48,
y: 225.23
},
{
x: 370.48,
y: 225.23
},
{
x: 207.03,
y: 230.76
},
{
x: 215.03,
y: 230.76
},
{
x: 223.03,
y: 230.76
},
{
x: 231.03,
y: 230.76
},
{
x: 239.03,
y: 230.76
},
{
x: 247.03,
y: 230.76
},
{
x: 255.03,
y: 230.76
},
{
x: 263.03,
y: 230.76
},
{
x: 271.03,
y: 230.76
},
{
x: 419.45,
y: 230.76
},
{
x: 427.45,
y: 230.76
},
{
x: 435.45,
y: 230.76
},
{
x: 443.45,
y: 230.76
},
{
x: 451.45,
y: 230.76
},
{
x: 459.45,
y: 230.76
},
{
x: 467.45,
y: 230.76
},
{
x: 475.45,
y: 230.76
},
{
x: 483.45,
y: 230.76
},
{
x: 552.97,
y: 230.76
},
{
x: 560.97,
y: 230.76
},
{
x: 568.97,
y: 230.76
},
{
x: 576.97,
y: 230.76
},
{
x: 584.97,
y: 230.76
},
{
x: 314.48,
y: 233.23
},
{
x: 322.48,
y: 233.23
},
{
x: 330.48,
y: 233.23
},
{
x: 338.48,
y: 233.23
},
{
x: 346.48,
y: 233.23
},
{
x: 354.48,
y: 233.23
},
{
x: 362.48,
y: 233.23
},
{
x: 370.48,
y: 233.23
},
{
x: 378.48,
y: 233.23
},
{
x: 207.03,
y: 238.76
},
{
x: 215.03,
y: 238.76
},
{
x: 223.03,
y: 238.76
},
{
x: 231.03,
y: 238.76
},
{
x: 239.03,
y: 238.76
},
{
x: 247.03,
y: 238.76
},
{
x: 255.03,
y: 238.76
},
{
x: 263.03,
y: 238.76
},
{
x: 271.03,
y: 238.76
},
{
x: 279.03,
y: 238.76
},
{
x: 419.45,
y: 238.76
},
{
x: 427.45,
y: 238.76
},
{
x: 435.45,
y: 238.76
},
{
x: 443.45,
y: 238.76
},
{
x: 451.45,
y: 238.76
},
{
x: 459.45,
y: 238.76
},
{
x: 467.45,
y: 238.76
},
{
x: 475.45,
y: 238.76
},
{
x: 483.45,
y: 238.76
},
{
x: 491.45,
y: 238.76
},
{
x: 552.97,
y: 238.76
},
{
x: 560.97,
y: 238.76
},
{
x: 568.97,
y: 238.76
},
{
x: 576.97,
y: 238.76
},
{
x: 584.97,
y: 238.76
},
{
x: 306.48,
y: 241.23
},
{
x: 314.48,
y: 241.23
},
{
x: 322.48,
y: 241.23
},
{
x: 330.48,
y: 241.23
},
{
x: 338.48,
y: 241.23
},
{
x: 346.48,
y: 241.23
},
{
x: 354.48,
y: 241.23
},
{
x: 362.48,
y: 241.23
},
{
x: 370.48,
y: 241.23
},
{
x: 378.48,
y: 241.23
},
{
x: 386.48,
y: 241.23
},
{
x: 199.03,
y: 246.76
},
{
x: 207.03,
y: 246.76
},
{
x: 215.03,
y: 246.76
},
{
x: 223.03,
y: 246.76
},
{
x: 231.03,
y: 246.76
},
{
x: 255.03,
y: 246.76
},
{
x: 263.03,
y: 246.76
},
{
x: 271.03,
y: 246.76
},
{
x: 279.03,
y: 246.76
},
{
x: 411.45,
y: 246.76
},
{
x: 419.45,
y: 246.76
},
{
x: 427.45,
y: 246.76
},
{
x: 435.45,
y: 246.76
},
{
x: 443.45,
y: 246.76
},
{
x: 467.45,
y: 246.76
},
{
x: 475.45,
y: 246.76
},
{
x: 483.45,
y: 246.76
},
{
x: 491.45,
y: 246.76
},
{
x: 544.97,
y: 246.76
},
{
x: 552.97,
y: 246.76
},
{
x: 560.97,
y: 246.76
},
{
x: 568.97,
y: 246.76
},
{
x: 576.97,
y: 246.76
},
{
x: 584.97,
y: 246.76
},
{
x: 306.48,
y: 249.24
},
{
x: 314.48,
y: 249.24
},
{
x: 322.48,
y: 249.24
},
{
x: 330.48,
y: 249.24
},
{
x: 362.48,
y: 249.24
},
{
x: 370.48,
y: 249.24
},
{
x: 378.48,
y: 249.24
},
{
x: 386.48,
y: 249.24
},
{
x: 199.03,
y: 254.76
},
{
x: 207.03,
y: 254.76
},
{
x: 215.03,
y: 254.76
},
{
x: 223.03,
y: 254.76
},
{
x: 255.03,
y: 254.76
},
{
x: 263.03,
y: 254.76
},
{
x: 271.03,
y: 254.76
},
{
x: 279.03,
y: 254.76
},
{
x: 411.45,
y: 254.76
},
{
x: 419.45,
y: 254.76
},
{
x: 427.45,
y: 254.76
},
{
x: 435.45,
y: 254.76
},
{
x: 467.45,
y: 254.76
},
{
x: 475.45,
y: 254.76
},
{
x: 483.45,
y: 254.76
},
{
x: 491.45,
y: 254.76
},
{
x: 544.97,
y: 254.76
},
{
x: 552.97,
y: 254.76
},
{
x: 560.97,
y: 254.76
},
{
x: 568.97,
y: 254.76
},
{
x: 576.97,
y: 254.76
},
{
x: 584.97,
y: 254.76
},
{
x: 306.48,
y: 257.24
},
{
x: 314.48,
y: 257.24
},
{
x: 322.48,
y: 257.24
},
{
x: 330.48,
y: 257.24
},
{
x: 362.48,
y: 257.24
},
{
x: 370.48,
y: 257.24
},
{
x: 378.48,
y: 257.24
},
{
x: 386.48,
y: 257.24
},
{
x: 199.03,
y: 262.76
},
{
x: 207.03,
y: 262.76
},
{
x: 215.03,
y: 262.76
},
{
x: 223.03,
y: 262.76
},
{
x: 255.03,
y: 262.76
},
{
x: 263.03,
y: 262.76
},
{
x: 271.03,
y: 262.76
},
{
x: 279.03,
y: 262.76
},
{
x: 411.45,
y: 262.76
},
{
x: 419.45,
y: 262.76
},
{
x: 427.45,
y: 262.76
},
{
x: 435.45,
y: 262.76
},
{
x: 467.45,
y: 262.76
},
{
x: 475.45,
y: 262.76
},
{
x: 483.45,
y: 262.76
},
{
x: 491.45,
y: 262.76
},
{
x: 536.97,
y: 262.76
},
{
x: 544.97,
y: 262.76
},
{
x: 552.97,
y: 262.76
},
{
x: 560.97,
y: 262.76
},
{
x: 568.97,
y: 262.76
},
{
x: 576.97,
y: 262.76
},
{
x: 584.97,
y: 262.76
},
{
x: 306.48,
y: 265.24
},
{
x: 314.48,
y: 265.24
},
{
x: 322.48,
y: 265.24
},
{
x: 330.48,
y: 265.24
},
{
x: 362.48,
y: 265.24
},
{
x: 370.48,
y: 265.24
},
{
x: 378.48,
y: 265.24
},
{
x: 386.48,
y: 265.24
},
{
x: 255.03,
y: 270.76
},
{
x: 263.03,
y: 270.76
},
{
x: 271.03,
y: 270.76
},
{
x: 279.03,
y: 270.76
},
{
x: 467.45,
y: 270.76
},
{
x: 475.45,
y: 270.76
},
{
x: 483.45,
y: 270.76
},
{
x: 491.45,
y: 270.76
},
{
x: 536.97,
y: 270.76
},
{
x: 544.97,
y: 270.76
},
{
x: 552.97,
y: 270.76
},
{
x: 560.97,
y: 270.76
},
{
x: 568.97,
y: 270.76
},
{
x: 576.97,
y: 270.76
},
{
x: 584.97,
y: 270.76
},
{
x: 306.48,
y: 273.24
},
{
x: 314.48,
y: 273.24
},
{
x: 322.48,
y: 273.24
},
{
x: 330.48,
y: 273.24
},
{
x: 362.48,
y: 273.24
},
{
x: 370.48,
y: 273.24
},
{
x: 378.48,
y: 273.24
},
{
x: 386.48,
y: 273.24
},
{
x: 255.03,
y: 278.76
},
{
x: 263.03,
y: 278.76
},
{
x: 271.03,
y: 278.76
},
{
x: 279.03,
y: 278.76
},
{
x: 467.45,
y: 278.76
},
{
x: 475.45,
y: 278.76
},
{
x: 483.45,
y: 278.76
},
{
x: 491.45,
y: 278.76
},
{
x: 528.97,
y: 278.76
},
{
x: 536.97,
y: 278.76
},
{
x: 544.97,
y: 278.76
},
{
x: 560.97,
y: 278.76
},
{
x: 568.97,
y: 278.76
},
{
x: 576.97,
y: 278.76
},
{
x: 584.97,
y: 278.76
},
{
x: 306.48,
y: 281.24
},
{
x: 314.48,
y: 281.24
},
{
x: 322.48,
y: 281.24
},
{
x: 330.48,
y: 281.24
},
{
x: 362.48,
y: 281.24
},
{
x: 370.48,
y: 281.24
},
{
x: 378.48,
y: 281.24
},
{
x: 386.48,
y: 281.24
},
{
x: 247.03,
y: 286.76
},
{
x: 255.03,
y: 286.76
},
{
x: 263.03,
y: 286.76
},
{
x: 271.03,
y: 286.76
},
{
x: 279.03,
y: 286.76
},
{
x: 459.45,
y: 286.76
},
{
x: 467.45,
y: 286.76
},
{
x: 475.45,
y: 286.76
},
{
x: 483.45,
y: 286.76
},
{
x: 491.45,
y: 286.76
},
{
x: 528.97,
y: 286.76
},
{
x: 536.97,
y: 286.76
},
{
x: 544.97,
y: 286.76
},
{
x: 560.97,
y: 286.76
},
{
x: 568.97,
y: 286.76
},
{
x: 576.97,
y: 286.76
},
{
x: 584.97,
y: 286.76
},
{
x: 306.48,
y: 289.24
},
{
x: 314.48,
y: 289.24
},
{
x: 322.48,
y: 289.24
},
{
x: 330.48,
y: 289.24
},
{
x: 362.48,
y: 289.24
},
{
x: 370.48,
y: 289.24
},
{
x: 378.48,
y: 289.24
},
{
x: 386.48,
y: 289.24
},
{
x: 247.03,
y: 294.76
},
{
x: 255.03,
y: 294.76
},
{
x: 263.03,
y: 294.76
},
{
x: 271.03,
y: 294.76
},
{
x: 459.45,
y: 294.76
},
{
x: 467.45,
y: 294.76
},
{
x: 475.45,
y: 294.76
},
{
x: 483.45,
y: 294.76
},
{
x: 520.97,
y: 294.76
},
{
x: 528.97,
y: 294.76
},
{
x: 536.97,
y: 294.76
},
{
x: 544.97,
y: 294.76
},
{
x: 560.97,
y: 294.76
},
{
x: 568.97,
y: 294.76
},
{
x: 576.97,
y: 294.76
},
{
x: 584.97,
y: 294.76
},
{
x: 306.48,
y: 297.24
},
{
x: 314.48,
y: 297.24
},
{
x: 322.48,
y: 297.24
},
{
x: 330.48,
y: 297.24
},
{
x: 362.48,
y: 297.24
},
{
x: 370.48,
y: 297.24
},
{
x: 378.48,
y: 297.24
},
{
x: 386.48,
y: 297.24
},
{
x: 239.03,
y: 302.76
},
{
x: 247.03,
y: 302.76
},
{
x: 255.03,
y: 302.76
},
{
x: 263.03,
y: 302.76
},
{
x: 271.03,
y: 302.76
},
{
x: 451.45,
y: 302.76
},
{
x: 459.45,
y: 302.76
},
{
x: 467.45,
y: 302.76
},
{
x: 475.45,
y: 302.76
},
{
x: 483.45,
y: 302.76
},
{
x: 520.97,
y: 302.76
},
{
x: 528.97,
y: 302.76
},
{
x: 536.97,
y: 302.76
},
{
x: 560.97,
y: 302.76
},
{
x: 568.97,
y: 302.76
},
{
x: 576.97,
y: 302.76
},
{
x: 584.97,
y: 302.76
},
{
x: 306.48,
y: 305.24
},
{
x: 314.48,
y: 305.24
},
{
x: 322.48,
y: 305.24
},
{
x: 330.48,
y: 305.24
},
{
x: 362.48,
y: 305.24
},
{
x: 370.48,
y: 305.24
},
{
x: 378.48,
y: 305.24
},
{
x: 386.48,
y: 305.24
},
{
x: 239.03,
y: 310.76
},
{
x: 247.03,
y: 310.76
},
{
x: 255.03,
y: 310.76
},
{
x: 263.03,
y: 310.76
},
{
x: 451.45,
y: 310.76
},
{
x: 459.45,
y: 310.76
},
{
x: 467.45,
y: 310..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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