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&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