gsap+svg实现鼠标互动的圣诞树效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现鼠标互动的圣诞树效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@font-face {font-family: "Irregardless"; src: url("https://assets.codepen.io/35984/51550-webfont.woff2") format("woff2")}
body {
background-color: #E8DDC5;
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;
overflow: visible;
}
line {
/* stroke: red; */
stroke-width: 2px;
}
text{
user-select: none;
pointer-events: none;
text-anchor: middle;
font-size: 5em;
font-family: 'Irregardless'
}
#m1 {
font-size: 6em;
}
</style>
</head>
<body>
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<defs>
<g id="dotContainer" >
<circle cx="221.41" cy="467.38" r="4"/>
<circle cx="233.34" cy="467.38" r="4"/>
<circle cx="245.26" cy="467.38" r="4"/>
<circle cx="245.26" cy="455.45" r="4"/>
<circle cx="257.19" cy="467.38" r="4"/>
<circle cx="257.19" cy="455.45" r="4"/>
<circle cx="257.19" cy="443.53" r="4"/>
<circle cx="257.19" cy="383.9" r="4"/>
<circle cx="269.11" cy="467.38" r="4"/>
<circle cx="269.11" cy="455.45" r="4"/>
<circle cx="269.11" cy="443.53" r="4"/>
<circle cx="269.11" cy="383.9" r="4"/>
<circle cx="269.11" cy="371.98" r="4"/>
<circle cx="281.04" cy="467.38" r="4"/>
<circle cx="281.04" cy="455.45" r="4"/>
<circle cx="281.04" cy="443.53" r="4"/>
<circle cx="281.04" cy="431.6" r="4"/>
<circle cx="281.04" cy="383.9" r="4"/>
<circle cx="281.04" cy="371.98" r="4"/>
<circle cx="281.04" cy="360.05" r="4"/>
<circle cx="292.96" cy="467.38" r="4"/>
<circle cx="292.96" cy="455.45" r="4"/>
<circle cx="292.96" cy="443.53" r="4"/>
<circle cx="292.96" cy="431.6" r="4"/>
<circle cx="292.96" cy="419.68" r="4"/>
<circle cx="292.96" cy="383.9" r="4"/>
<circle cx="292.96" cy="371.98" r="4"/>
<circle cx="292.96" cy="360.05" r="4"/>
<circle cx="292.96" cy="348.13" r="4"/>
<circle cx="304.89" cy="467.38" r="4"/>
<circle cx="304.89" cy="455.45" r="4"/>
<circle cx="304.89" cy="443.53" r="4"/>
<circle cx="304.89" cy="431.6" r="4"/>
<circle cx="304.89" cy="419.68" r="4"/>
<circle cx="304.89" cy="407.75" r="4"/>
<circle cx="304.89" cy="371.98" r="4"/>
<circle cx="304.89" cy="360.05" r="4"/>
<circle cx="304.89" cy="348.13" r="4"/>
<circle cx="304.89" cy="336.2" r="4"/>
<circle cx="304.89" cy="288.5" r="4"/>
<circle cx="316.81" cy="467.38" r="4"/>
<circle cx="316.81" cy="455.45" r="4"/>
<circle cx="316.81" cy="443.53" r="4"/>
<circle cx="316.81" cy="431.6" r="4"/>
<circle cx="316.81" cy="419.68" r="4"/>
<circle cx="316.81" cy="407.75" r="4"/>
<circle cx="316.81" cy="395.83" r="4"/>
<circle cx="316.81" cy="371.98" r="4"/>
<circle cx="316.81" cy="360.05" r="4"/>
<circle cx="316.81" cy="348.13" r="4"/>
<circle cx="316.81" cy="336.2" r="4"/>
<circle cx="316.81" cy="324.28" r="4"/>
<circle cx="316.81" cy="288.5" r="4"/>
<circle cx="316.81" cy="276.58" r="4"/>
<circle cx="316.81" cy="264.65" r="4"/>
<circle cx="328.74" cy="467.38" r="4"/>
<circle cx="328.74" cy="455.45" r="4"/>
<circle cx="328.74" cy="443.53" r="4"/>
<circle cx="328.74" cy="431.6" r="4"/>
<circle cx="328.74" cy="419.68" r="4"/>
<circle cx="328.74" cy="407.75" r="4"/>
<circle cx="328.74" cy="395.83" r="4"/>
<circle cx="328.74" cy="383.9" r="4"/>
<circle cx="328.74" cy="371.98" r="4"/>
<circle cx="328.74" cy="360.05" r="4"/>
<circle cx="328.74" cy="348.13" r="4"/>
<circle cx="328.74" cy="336.2" r="4"/>
<circle cx="328.74" cy="324.28" r="4"/>
<circle cx="328.74" cy="312.35" r="4"/>
<circle cx="328.74" cy="276.58" r="4"/>
<circle cx="328.74" cy="264.65" r="4"/>
<circle cx="328.74" cy="252.73" r="4"/>
<circle cx="340.66" cy="467.38" r="4"/>
<circle cx="340.66" cy="455.45" r="4"/>
<circle cx="340.66" cy="443.53" r="4"/>
<circle cx="340.66" cy="431.6" r="4"/>
<circle cx="340.66" cy="419.68" r="4"/>
<circle cx="340.66" cy="407.75" r="4"/>
<circle cx="340.66" cy="395.83" r="4"/>
<circle cx="340.66" cy="383.9" r="4"/>
<circle cx="340.66" cy="371.98" r="4"/>
<circle cx="340.66" cy="360.05" r="4"/>
<circle cx="340.66" cy="348.13" r="4"/>
<circle cx="340.66" cy="336.2" r="4"/>
<circle cx="340.66" cy="324.28" r="4"/>
<circle cx="340.66" cy="312.35" r="4"/>
<circle cx="340.66" cy="300.43" r="4"/>
<circle cx="340.66" cy="276.58" r="4"/>
<circle cx="340.66" cy="264.65" r="4"/>
<circle cx="340.66" cy="252.73" r="4"/>
<circle cx="340.66" cy="240.8" r="4"/>
<circle cx="340.66" cy="205.03" r="4"/>
<circle cx="340.66" cy="193.1" r="4"/>
<circle cx="352.59" cy="467.38" r="4"/>
<circle cx="352.59" cy="455.45" r="4"/>
<circle cx="352.59" cy="443.53" r="4"/>
<circle cx="352.59" cy="431.6" r="4"/>
<circle cx="352.59" cy="419.68" r="4"/>
<circle cx="352.59" cy="407.75" r="4"/>
<circle cx="352.59" cy="395.83" r="4"/>
<circle cx="352.59" cy="383.9" r="4"/>
<circle cx="352.59" cy="371.98" r="4"/>
<circle cx="352.59" cy="360.05" r="4"/>
<circle cx="352.59" cy="348.13" r="4"/>
<circle cx="352.59" cy="336.2" r="4"/>
<circle cx="352.59" cy="324.28" r="4"/>
<circle cx="352.59" cy="312.35" r="4"/>
<circle cx="352.59" cy="300.43" r="4"/>
<circle cx="352.59" cy="288.5" r="4"/>
<circle cx="352.59" cy="276.58" r="4"/>
<circle cx="352.59" cy="264.65" r="4"/>
<circle cx="352.59" cy="252.73" r="4"/>
<circle cx="352.59" cy="240.8" r="4"/>
<circle cx="352.59" cy="228.88" r="4"/>
<circle cx="352.59" cy="193.1" r="4"/>
<circle cx="352.59" cy="181.18" r="4"/>
<circle cx="352.59" cy="169.25" r="4"/>
<circle cx="364.51" cy="467.38" r="4"/>
<circle cx="364.51" cy="455.45" r="4"/>
<circle cx="364.51" cy="443.53" r="4"/>
<circle cx="364.51" cy="431.6" r="4"/>
<circle cx="364.51" cy="419.68" r="4"/>
<circle cx="364.51" cy="407.75" r="4"/>
<circle cx="364.51" cy="395.83" r="4"/>
<circle cx="364.51" cy="383.9" r="4"/>
<circle cx="364.51" cy="371.98" r="4"/>
<circle cx="364.51" cy="360.05" r="4"/>
<circle cx="364.51" cy="348.13" r="4"/>
<circle cx="364.51" cy="336.2" r="4"/>
<circle cx="364.51" cy="324.28" r="4"/>
<circle cx="364.51" cy="312.35" r="4"/>
<circle cx="364.51" cy="300.43" r="4"/>
<circle cx="364.51" cy="288.5" r="4"/>
<circle cx="364.51" cy="276.58" r="4"/>
<circle cx="364.51" cy="264.65" r="4"/>
<circle cx="364.51" cy="252.73" r="4"/>
<circle cx="364.51" cy="240.8" r="4"/>
<circle cx="364.51" cy="228.88" r="4"/>
<circle cx="364.51" cy="216.95" r="4"/>
<circle cx="364.51" cy="205.03" r="4"/>
<circle cx="364.51" cy="193.1" r="4"/>
<circle cx="364.51" cy="181.18" r="4"/>
<circle cx="364.51" cy="169.25" r="4"/>
<circle cx="364.51" cy="157.33" r="4"/>
<circle cx="376.44" cy="455.45" r="4"/>
<circle cx="376.44" cy="443.53" r="4"/>
<circle cx="376.44" cy="431.6" r="4"/>
<circle cx="376.44" cy="419.68" r="4"/>
<circle cx="376.44" cy="407.75" r="4"/>
<circle cx="376.44" cy="395.83" r="4"/>
<circle cx="376.44" cy="383.9" r="4"/>
<circle cx="376.44" cy="371.98" r="4"/>
<circle cx="376.44" cy="360.05" r="4"/>
<circle cx="376.44" cy="348.13" r="4"/>
<circle cx="376.44" cy="336.2" r="4"/>
<circle cx="376.44" cy="324.28" r="4"/>
<circle cx="376.44" cy="312.35" r="4"/>
<circle cx="376.44" cy="300.43" r="4"/>
<circle cx="376.44" cy="288.5" r="4"/>
<circle cx="376.44" cy="276.58" r="4"/>
<circle cx="376.44" cy="264.65" r="4"/>
<circle cx="376.44" cy="252.73" r="4"/>
<circle cx="376.44" cy="240.8" r="4"/>
<circle cx="376.44" cy="228.88" r="4"/>
<circle cx="376.44" cy="216.95" r="4"/>
<circle cx="376.44" cy="205.03" r="4"/>
<circle cx="376.44" cy="193.1" r="4"/>
<circle cx="376.44" cy="181.18" r="4"/>
<circle cx="376.44" cy="169.25" r="4"/>
<circle cx="376.44" cy="157.33" r="4"/>
<circle cx="376.44" cy="145.4" r="4"/>
<circle cx="376.44" cy="133.48" r="4"/>
<circle cx="388.36" cy="527" r="4"/>
<circle cx="388.36" cy="515.08" r="4"/>
<circle cx="388.36" cy="503.15" r="4"/>
<circle cx="388.36" cy="491.23" r="4"/>
<circle cx="388.36" cy="479.3" r="4"/>
<circle cx="388.36" cy="467.38" r="4"/>
<circle cx="388.36" cy="455.45" r="4"/>
<circle cx="388.36" cy="443.53" r="4"/>
<circle cx="388.36" cy="431.6" r="4"/>
<circle cx="388.36" cy="419.68" r="4"/>
<circle cx="388.36" cy="407.75" r="4"/>
<circle cx="388.36" cy="395.83" r="4"/>
<circle cx="388.36" cy="383.9" r="4"/>
<circle cx="388.36" cy="371.98" r="4"/>
<circle cx="388.36" cy="360.05" r="4"/>
<circle cx="388.36" cy="348.13" r="4"/>
<circle cx="388.36" cy="336.2" r="4"/>
<circle cx="388.36" cy="324.28" r="4"/>
<circle cx="388.36" cy="312.35" r="4"/>
<circle cx="388.36" cy="300.43" r="4"/>
<circle cx="388.36" cy="288.5" r="4"/>
<circle cx="388.36" cy="276.58" r="4"/>
<circle cx="388.36" cy="264.65" r="4"/>
<circle cx="388.36" cy="252.73" r="4"/>
<circle cx="388.36" cy="240.8" r="4"/>
<circle cx="388.36" cy="228.88" r="4"/>
<circle cx="388.36" cy="216.95" r="4"/>
<circle cx="388.36" cy="205.03" r="4"/>
<circle cx="388.36" cy="193.1" r="4"/>
<circle cx="388.36" cy="181.18" r="4"/>
<circle cx="388.36" cy="169.25" r="4"/>
<circle cx="388.36" cy="157.33" r="4"/>
<circle cx="388.36" cy="145.4" r="4"/>
<circle cx="388.36" cy="133.48" r="4"/>
<circle cx="388.36" cy="121.55" r="4"/>
<circle cx="388.36" cy="109.63" r="4"/>
<circle cx="400.29" cy="527" r="4"/>
<circle cx="400.29" cy="515.08" r="4"/>
<circle cx="400.29" cy="503.15" r="4"/>
<circle cx="400.29" cy="491.23" r="4"/>
<circle cx="400.29" cy="479.3" r="4"/>
<circle cx="400.29" cy="467.38" r="4"/>
<circle cx="400.29" cy="455.45" r="4"/>
<circle cx="400.29" cy="443.53" r="4"/>
<circle cx="400.29" cy="431.6" r="4"/>
<circle cx="400.29" cy="419.68" r="4"/>
<circle cx="400.29" cy="407.75" r="4"/>
<circle cx="400.29" cy="395.83" r="4"/>
<circle cx="400.29" cy="383.9" r="4"/>
<circle cx="400.29" cy="371.98" r="4"/>
<circle cx="400.29" cy="360.05" r="4"/>
<circle cx="400.29" cy="348.13" r="4"/>
<circle cx="400.29" cy="336.2" r="4"/>
<circle cx="400.29" cy="324.28" r="4"/>
<circle cx="400.29" cy="312.35" r="4"/>
<circle cx="400.29" cy="300.43" r="4"/>
<circle cx="400.29" cy="288.5" r="4"/>
<circle cx="400.29" cy="276.58" r="4"/>
<circle cx="400.29" cy="264.65" r="4"/>
<circle cx="400.29" cy="252.73" r="4"/>
<circle cx="400.29" cy="240.8" r="4"/>
<circle cx="400.29" cy="228.88" r="4"/>
<circle cx="400.29" cy="216.95" r="4"/>
<circle cx="400.29" cy="205.03" r="4"/>
<circle cx="400.29" cy="193.1" r="4"/>
<circle cx="400.29" cy="181.18" r="4"/>
<circle cx="400.29" cy="169.25" r="4"/>
<circle cx="400.29" cy="157.33" r="4"/>
<circle cx="400.29" cy="145.4" r="4"/>
<circle cx="400.29" cy="133.48" r="4"/>
<circle cx="400.29" cy="121.55" r="4"/>
<circle cx="400.29" cy="109.63" r="4"/>
<circle cx="400.29" cy="97.7" r="4"/>
<circle cx="400.29" cy="85.78" r="4"/>
<circle cx="400.29" cy="73.85" r="4"/>
<circle cx="412.21" cy="527" r="4"/>
<circle cx="412.21" cy="515.08" r="4"/>
<circle cx="412.21" cy="503.15" r="4"/>
<circle cx="412.21" cy="491.23" r="4"/>
<circle cx="412.21" cy="479.3" r="4"/>
<circle cx="412.21" cy="467.38" r="4"/>
<circle cx="412.21" cy="455.45" r="4"/>
<circle cx="412.21" cy="443.53" r="4"/>
<circle cx="412.21" cy="431.6" r="4"/>
<circle cx="412.21" cy="419.68" r="4"/>
<circle cx="412.21" cy="407.75" r="4"/>
<circle cx="412.21" cy="395.83" r="4"/>
<circle cx="412.21" cy="383.9" r="4"/>
<circle cx="412.21" cy="371.98" r="4"/>
<circle cx="412.21" cy="360.05" r="4"/>
<circle cx="412.21" cy="348.13" r="4"/>
<circle cx="412.21" cy="336.2" r="4"/>
<circle cx="412.21" cy="324.28" r="4"/>
<circle cx="412.21" cy="312.35" r="4"/>
<circle cx="412.21" cy="300.43" r="4"/>
<circle cx="412.21" cy="288.5" r="4"/>
<circle cx="412.21" cy="276.58" r="4"/>
<circle cx="412.21" cy="264.65" r="4"/>
<circle cx="412.21" cy="252.73" r="4"/>
<circle cx="412.21" cy="240.8" r="4"/>
<circle cx="412.21" cy="228.88" r="4"/>
<circle cx="412.21" cy="216.95" r="4"/>
<circle cx="412.21" cy="205.03" r="4"/>
<circle cx="412.21" cy="193.1" r="4"/>
<circle cx="412.21" cy="181.18" r="4"/>
<circle cx="412.21" cy="169.25" r="4"/>
<circle cx="412.21" cy="157.33" r="4"/>
<circle cx="412.21" cy="145.4" r="4"/>
<circle cx="412.21" cy="133.48" r="4"/>
<circle cx="412.21" cy="121.55" r="4"/>
<circle cx="412.21" cy="109.63" r="4"/>
<circle cx="412.21" cy="97.7" r="4"/>
<circle cx="412.21" cy="85.78" r="4"/>
<circle cx="424.14" cy="527" r="4"/>
<circle cx="424.14" cy="515.08" r="4"/>
<circle cx="424.14" cy="503.15" r="4"/>
<circle cx="424.14" cy="491.23" r="4"/>
<circle cx="424.14" cy="479.3" r="4"/>
<circle cx="424.14" cy="467.38" r="4"/>
<circle cx="424.14" cy="455.45" r="4"/>
<circle cx="424.14" cy="443.53" r="4"/>
<circle cx="424.14" cy="431.6" r="4"/>
<circle cx="424.14" cy="419.68" r="4"/>
<circle cx="424.14" cy="407.75" r="4"/>
<circle cx="424.14" cy="395.83" r="4"/>
<ci.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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