gsap+ScrollTrigger实现鼠标滚动触发鱿鱼游戏标题文字变形动画效果代码
代码语言：html
所属分类：动画
代码描述：使用gsap及ScrollTrigger实现通过鼠标滚动来控制鱿鱼游戏标题文字变形动画效果代码
代码标签： gsap ScrollTrigger 鱿鱼游戏 文字 动画 滚动
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>body {
height: 800vh;
background: black;
margin: 0;
}
svg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="400 0 1100 960">
<defs>
<filter id="dropshadow_top">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="4" dy="-4" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="dropshadow_bottom" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="4" dy="4" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="dropshadow_shade" filterUnits="userSpaceOnUse" x="400">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="4" dy="-4" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<clipPath id="clip-path">
<rect x="976.09" y="453.96" width="147.83" height="159.59" fill="none" />
</clipPath>
<clipPath id="clip-path-2">
<polygon id="ct_mask_top" points="1141.08 443.3 959.88 135.78 638.48 135.78 620.66 443.3 620.66 471.3 1157.57 471.3 1141.08 443.3" fill="none" />
</clipPath>
<clipPath id="clip-path-3">
<polygon id="ct_mask_bottom" points="959.88 135.78 762.19 471.3 1157.57 471.3 959.88 135.78" fill="none" />
</clipPath>
</defs>
<g>
<g id="Top_circle">
<path id="tc_top" d="M959.88,68a72.21,72.21,0,1,1-72.21,72.21A72.21,72.21,0,0,1,959.88,68h327.74" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="457 800" />
<path id="tc_right" d="M1274,377.71a32.48,32.48,0,1,0-32.47,32.47A32.48,32.48,0,0,0,1274,377.71l-.4-323.42" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="240 600" />
</g>
<line id="right_line1" x1="1368.87" y1="281.63" x2="1368.87" y2="448.39" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<line id="right_line3" x1="1139.51" y1="462.74" x2="1139.51" y2="578.54" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<line id="right_line4" x1="1061.44" y1="526.08" x2="1139.51" y2="526.08" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<g clip-path="url(#clip-path)">
<polyline id="seven" points="1008 634.32 1084.21 475.75 1017.9 475.75" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="242 500" filter="url(#dropshadow_bottom)" />
</g>
<line id="top_line1" x1="1052.14" y1="281.63" x2="1052.14" y2="448.39" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<line id="top_line2" x1="974.94" y1="375.4" x2="1052.14" y2="375.4" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<circle id="bottom_circle" cx="847.47" cy="520.64" r="32" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="242 500" />
<circle id="top_circle_2" cx="944.88" cy="375.4" r="32" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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