TweenMax+MorphSVGPlugin+DrawSVGPlugin+svg实现小球弹跳线条文字显示动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+MorphSVGPlugin+DrawSVGPlugin+svg实现小球弹跳线条文字显示动画效果代码，点击开始按钮，红色小球下落，画出一道弧线，起伏向前，文字显示出来。
代码标签： TweenMax MorphSVGPlugin DrawSVGPlugin svg 小球 弹跳 线条
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
overflow: hidden;
width: 100%;
height: 100vh;
position: relative;
background-color: rgb(32, 32, 32);
}
/* === SVG === */
svg {
display: block;
width: 100%;
height: 100vh;
}
svg #startText,
svg #restartText {
fill: #ffffff;
pointer-events: none;
}
svg #ball {
pointer-events: none;
}
svg #text,
svg #com {
fill:transparent;
}
svg #paths {
fill:none;
stroke: rgb(80, 80, 80);
stroke-width: 2px;
stroke-linejoin:round;
stroke-dasharray:10;
stroke:gray;
opacity: 0;
}
svg #startClick {
opacity: 0;
cursor: pointer;
}
svg #startClick:hover + #startText,
svg #restartClick:hover + #restartText {
stroke: rgba(255,65,65,0.3);
stroke-width: 4px;
}
svg #restartClick {
cursor: pointer;
fill:transparent;
}
svg #restartText {
opacity:0;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="wrapper" ontouchstart="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1378 564" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- I use mask to make dashed line (DrawSVG plugin won’t draw a dashed path) -->
<g stroke-width="3px" stroke="#fff">
<mask id="mask1">
<path id="path1_m" d="M196.5,79l3,321.5s188-246,473,7" />
</mask>
<mask id="mask2">
<path id="path2_m"
d="M672.5,407.5s-141.2-111.8-261.8-10c-.2.2-.5-.1-.4-.3,36.5-57.4,205.9-744.5,542.2,2.3" />
</mask>
<mask id="mask2_1">
<path id="path2_1_m" d="M952,399.2c1.7-503.1,103.2-502.7,101.5.3" />
</mask>
<mask id="mask3">
<path id="path3_m" d="M1054.5,399.5c.3-159.5,21.7-422.2,42,0" />
</mask>
<mask id="mask4">
<path id="path4_m" d="M1097,400c.3-73.6,26.2-196.4,40,0" />
</mask>
<mask id="mask5">
<path id="path5_m" d="M1138,400c-.1-24.1,47.7-102.5,67,82" />
</mask>
<mask id="mask6">
<path id="path6_m" d="M1205,482c1.9-11.9,56.7-134,91,9" />
</mask>
<mask id="mask8">
<path id="path8_m" d="M1294,492C1122,40.1,887.4-84.9,539.5,396.5" />
</mask>
<mask id="maskB1">
<path id="path_b1_m" d="M541,426.5c-.4-38.4,55.1-399.7,140.5-63-54.5-105.5-139.6-89.3-140-42" />
</mask>
<mask id="maskB2">
<path id="path_b2_m" d="M542,426.5c.4-38.4-55.6-398.7-141-62,54.5-105.5,140.1-91.3,140.5-44" />
</mask>
<mask id="mask9">
<path id="path9_m" d="M541,322.5C544.5,191.8,752.1-20.6,868,400" />
</mask>
<mask id="mask10">
<path id="path10_m"
d="M867.5,402.5l-59,33,58,22-56-4,55-5-56-2,57-5-57-2,57-6-58-2,58-6-58-2,59-23" />
</mask>
<mask id="mask11">
<path id="path11_m" d="M867.5,401.5c-16.3-192.3-494.2-690.2-576-7" />
</mask>
</g>
<!-- use for fake morphing effect on some letters -->
<clipPath id="r_clipPath">
<circle id="r_circle" cx="200" cy="402" r="0" />
</clipPath>
<clipPath id="e_clipPath">
<circle id="e_circle" cx="952.5" cy="401.5" r="0.5" />
</clipPath>
<clipPath id="h_clipPath">
<circle id="h_circle" cx="869.5" cy="401.5" r="0.5" />
</clipPath>
<clipPath id="com_clipPath">
<circle id="com_circle" cx="1295" cy="500" r="1" />
</clipPath>
<!-- for hide letter: "T" -->
<clipPath id="rect_clip">
<rect id="tHide" x="1039" y="263" width="124" height="168" />
</clipPath>
<!-- for shine effect -->
<linearGradient id="shine" x1="0%" y1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="rgba(255,255,255,0.2)" />
<stop offset="100%" stop-color="transparent" />
</linearGradient>
</defs>
<!-- background -->
<image width="2000" height="1294" transform="translate(-11 -186) scale(0.7)" preserveAspectRatio="xMinYMin slice" xlink:href="https://user-images.githubusercontent.com/26748614/112760873-cf72ca00-8ff8-11eb-8395-4ffdd3b499b5.jpg"/>
<!-- for shine effect -->
<rect id="shine" x="0" y="-50%" width="30%" height="200%" transform='translate(2000 0) skewX(-25)'
fill="url(#shine)" style="opacity:0" />
<!-- use for capturing click event on "Start" text -->
<rect id="startClick" x="103" y="43.4" width="180" height="57.59" />
<g id="startText">
<path
d="M139.8,72.5c-3-3.1-7.1-4-11.4-4.2s-7.7.9-10.8-.6a4.8,4.8,0,0,1-1.3-7.8c3.1-3,10.5-1.4,14.4-1.4s5.1-.1,7.6,0c.4,0,3.4.3,3.8,0s.4-9.3-.1-9.7-9.5-.1-11.5-.1c-5.1,0-11.3-.9-16.2,1a14.8,14.8,0,0,0-7.5,20.5,15.1,15.1,0,0,0,8.5,7c4.9,1.6,10.2-.4,15.1.9a4.8,4.8,0,0,1,3.7,5.6c-.7,3.4-3.7,4-6.7,4.1-5.2.1-10.5-.3-15.8-.2-2.1,0-3-.3-3.8,1.1s-.5,6.4-.1,7.4.5,1.4,2.8,1.4h8c5.3,0,11.6,1,16.7-1.1C144.5,92.3,147.1,79.7,139.8,72.5Z" />
<path
d="M160.2,46.5c-1.8,0-8-1.3-9.2.2s-.2,7.8-.1,9.8.5,2.8.2,3.6-1.3.7-2.9,1-1.2-.2-1.8.5,0,4.3,0,5.4-.8,3.1,1.5,3.5,2.1-1,3.1.7-.1,4.3-.1,5.6c0,6.9.9,13.5,7.1,17.8a18,18,0,0,0,9.6,2.9c2.8.1,6.4,1.2,6.9-2,.1-.9.3-6.1-.1-6.8s-5.1-.4-6.5-.5c-8.3-.6-7.6-7.1-7.7-13..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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