js+css实现可配置参数的蜘蛛网代码
代码语言：html
所属分类：布局界面
代码描述：js+css实现可配置参数的蜘蛛网代码,，可调节线的数量及点的数量，还可调节环的数量及扩展大小。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
accent-color: orange;
background: black radial-gradient(orange, black 75%) no-repeat;
color: #FFF;
font-family: system-ui;
margin: 0;
}
circle { fill: currentColor; }
fieldset {
background: black;
border: 0;
display: flex;
flex-wrap: wrap;
gap: 1ch;
justify-content: space-between;
isolation: isolate;
}
label {
align-items: center;
display: flex;
font-size: x-small;
gap: 1ch;
}
line { stroke: currentColor; }
svg { overflow: visible }
</style>
</head>
<body >
<form id="app">
<fieldset>
<label>Points
<input type="range" name="pointsring" min="5" max="20" value="12">
</label>
<label>Dots
<input type="range" name="dotsize" min="1" max="7" value="3">
</label>
<label>Rings
<input type="range" name="numrings" min="3" max="20" value="12">
</label>
<label>Spread
<input type="range" name="spread" min="10" max="100" value="40">
</label>
</fieldset>
</form>
<svg viewBox="0 0 1000 1000" class="webdesigner"><g>
<circle cx="460" cy="500" r="3"></circle>
<line x1="460" y1="500" x2="20" y2="500" stroke-width="1.29"></line>
<circle cx="465" cy="480" r="3"></circle>
<line x1="465" y1="480" x2="460" y2="500" stroke-width="0.49"></line>
<line x1="465" y1="480" x2="84" y2="260" stroke-width="1.26"></line>
<circle cx="480" cy="465" r="3"></circle>
<line x1="480" y1="465" x2="465" y2="480" stroke-width="0.31"></line>
<line x1="480" y1="465" x2="260" y2="84" stroke-width="1.34"></line>
<circle cx="500" cy="460" r="3"></circle>
<line x1="500" y1="460" x2="480" y2="465" stroke-width="0.54"></line>
<line x1="500" y1="460" x2="500" y2="20" stroke-width="0.86"></line>
<circle cx="520" cy="465" r="3"></circle>
<line x1="520" y1="465" x2="500" y2="460" stroke-width="0.51"></line>
<line x1="520" y1="465" x2="740" y2="84" stroke-width="1.35"></line>
<circle cx="535" cy="480" r="3"></circle>
<line x1="535" y1="480" x2="520" y2="465" stroke-width="0.78"></line>
<line x1="535" y1="480" x2="916" y2="260" stroke-width="0.87"></line>
<circle cx="540" cy="500" r="3"></circle>
<line x1="540" y1="500" x2="535" y2="480" stroke-width="1.09"></line>
<line x1="540" y1="500" x2="980" y2="500" stroke-width="1.09"></line>
<circle cx="535" cy="520" r="3"></circle>
<line x1="535" y1="520" x2="540" y2="500" stroke-width="0.27"></line>
<line x1="535" y1="520" x2="916" y2="740" stroke-width="1.29"></line>
<circle cx="520" cy="535" r="3"></circle>
<line x1="520" y1="535" x2="535" y2="520" stroke-width="1.39"></line>
<line x1="520" y1="535" x2="740" y2="916" stroke-width="1.04"></line>
<circle cx="500" cy="540" r="3"></circle>
<line x1="500" y1="540" x2="520" y2="535" stroke-width="0.46"></line>
<line x1="500" y1="540" x2="500" y2="980" stroke-width="0.9"></line>
<circle cx="480" cy="535" r="3"></circle>
<line x1="480" y1="535" x2="500" y2="540" stroke-width="0.71"></line>
<line x1="480" y1="535" x2="260" y2="916" stroke-width="1.43"></line>
<circle cx="465" cy="520" r="3"></circle>
<line x1="465" y1="520" x2="480" y2="535" stroke-width="0.28"></line>
<line x1="465" y1="520" x2="84" y2="740" stroke-width="1.11"></line>
<circle cx="460" cy="500" r="3"></circle>
<line x1="460" y1="500" x2="465" y2="520" stroke-width="0.25"></line>
<line x1="460" y1="500" x2="20" y2="500" stroke-width="1.11"></line>
</g><g>
<circle cx="420" cy="500" r="3"></circle>
<circle cx="431" cy="460" r="3"></circle>
<line x1="431" y1="460" x2="420" y2="500" stroke-width="1.06"></line>
<circle cx="460" cy="431" r="3"></circle>
<line x1="460" y1="431" x2="431" y2="460" stroke-width="0.4"></line>
<circle cx="500" cy="420" r="3"></circle>
<line x1="500" y1="420" x2="460" y2="431" stroke-width="0.5"></line>
<circle cx="540" cy="431" r="3"></circle>
<line x1="540" y1="431" x2="500" y2="420" stroke-width="0.58"></line>
<circle cx="569" cy="460" r="3"></circle>
<line x1="569" y1="460" x2="540" y2="431" stroke-width="1.32"></line>
<circle cx="580" cy="500" r="3"></circle>
<line x1="580" y1="500" x2="569" y2="460" stroke-width="1.34"></line>
<circle cx="569" cy="540" r="3"></circle>
<line x1="569" y1="540" x2="580" y2="500" stroke-width="1.02"></line>
<circle cx="540" cy="569" r="3"></circle>
<line x1="540" y1="569" x2="569" y2="540" stroke-width="1.29"></line>
<circle cx="500" cy="580" r="3"></circle>
<line x1="500" y1="580" x2="540" y2="569" stroke-width="0.3"></line>
<circle cx="460" cy="569" r="3"></circle>
<line x1="460" y1="569" x2="500" y2="580" stroke-width="0.69"></line>
<circle cx="431" cy="540" r="3"></circle>
<line x1="431" y1="540" x2="460" y2="569" stroke-width="1.19"></line>
<circle cx="420" cy="500" r="3"></circle>
<line x1="420" y1="500" x2="431" y2="540" stroke-width="1.23"></line>
</g><g>
<circle cx="380" cy="500" r="3"></circle>
<circle cx="396" cy="440" r="3"></circle>
<line x1="396" y1="440" x2="380" y2="500" stroke-width="1.15"></line>
<circle cx="440" cy="396" r="3"></circle>
<line x1="440" y1="396" x2="396" y2="440" stroke-width="1.39"></line>
<circle cx="500" cy="380" r="3"></circle>
<line x1="500" y1="380" x2="440" y2="396" stroke-width="1.3"></line>
<circle cx="560" cy="396" r="3"></circle>
<line x1="560" y1="396" x2="500" y2="380" stroke-width="0.32"></line>
<circle cx="604" cy="440" r="3"></circle>
<line x1="604" y1="440" x2="560" y2="396" stroke-width="0.49"></line>
<circle cx="620" cy="500" r="3"></circle>
<line x1="620" y1="500" x2="604" y2="440" stroke-width="0.65"></line>
<circle cx="604" cy="560" r="3"></circle>
<line x1="604" y1="560" x2="620" y2="500" stroke-width="0.85"></line>
<circle cx="560" cy="604" r="3"></circle>
<line x1="560" y1="604" x2="604" y2="560" stroke-width="0.37"></line>
<circle cx="500" cy="620" r="3"></circle>
<line x1="500" y1="620" x2="560" y2="604" stroke-width="1.35"></line>
<circle cx="440" cy="604" r="3"></circle>
<line x1="440" y1="604" x2="500" y2="620" stroke-width="1.25"></line>
<circle cx="396" cy="560" r="3"></circle>
<line x1="396" y1="560" x2="440" y2="604" stroke-width="0.96"></line>
<circle cx="380" cy="500" r="3"></circle>
<line x1="380" y1="500" x2="396" y2="560" stroke-width="0.83"></line>
</g><g>
<circle cx="340" cy="500" r="3"></circle>
<circle cx="361" cy="420" r="3"></circle>
<line x1="361" y1="420" x2="340" y2="500" stroke-width="1"></line>
<circle cx="420" cy="361" r="3"></circle>
<line x1="420" y1="361" x2="361" y2="420" stroke-width="0.41"></line>
<circle cx="500" cy="340" r="3"></circle>
<line x1="500" y1="340" x2="420" y2="361" stroke-width="0.7"></line>
<circle cx="580" cy="361" r="3"></circle>
<line x1="580" y1="361" x2="500" y2="340" stroke-width="0.38"></line>
<circle cx="639" cy="420" r="3"></circle>
<line x1="639" y1="420" x2="580" y2="361" stroke-width="0.56"></line>
<circle cx="660" cy="500" r="3"></circle>
<line x1="660" y1="500" x2="639" y2="420" stroke-width="1.12"></line>
<circle cx="639" cy="580" r="3"></circle>
<line x1="639" y1="580" x2="660" y2="500" stroke-width="1.04"></line>
<circle cx="580" cy="639" r="3"></circle>
<line x1="580" y1="639" x2="639" y2="580" stroke-width="0.87"></line>
<circle cx="500" cy="660" r="3"></circle>
<line x1="500" y1="660" x2="580" y2="639" stroke-width="0.9"></line>
<circle cx="420" cy="639" r="3"></circle>
<line x1="420" y1="639" x2="500" y2="660" stroke-width="0.4"></line>
<circle cx="361" cy="580" r="3"></circle>
<line x1="361" y1="580" x2="420" y2="639" stroke-width="1.12"></line>
<circle cx="340" cy="500" r="3"></circle>
<line x1="340" y1="500" x2="361" y2="580" stroke-width="0.87"></line>
</g><g>
<circle cx="300" cy="500" r="3"></circle>
<circle cx="327" cy="400" r="3"></circle>
<line x1="327" y1="400" x2="300" y2="500" stroke-width="1.21"></line>
<circle cx="400" cy="327" r="3"></circle>
<line x1="400" y1="327" x2="327" y2="400" stroke-width="1.21"></line>
<circle cx="500" cy="300" r="3"></circle>
<line x1="500" y1="300" x2="400" y2="327" stroke-width="0.85"></line>
<circle cx="600" cy="327" r="3"></circle>
<line x1="600" y1="327" x2="500" y2="300" stroke-width="0.55"></line>
<circle cx="673" cy="400" r="3"></circle>
<line x1="673" y1="400" x2="600" y2="327" stroke-width="0.97"></line>
<circle cx="700" cy="500" r="3"></circle>
<line x1="700" y1="500" x2="673" y2="400" stroke-width="0.99"></line>
<circle cx="673" cy="600" r="3"></circle>
<line x1="673" y1="600" x2="700" y2="500" stroke-width="0.51"></line>
<circle cx="600" cy="673" r="3"></circle>
<line x1="600" y1="673" x2="673" y2="600" stroke-width="0.29"></line>
<circle cx="500" cy="700" r="3"></circle>
<line x1="500" y1="700" x2="600" y2="673" stroke-width="0.45"></line>
<circle cx="400" cy="673" r="3"></circle>
<line x1="400" y1="673" x2="500" y2="700" stroke-width="1.19"></line>
<circle cx="327" cy="600" r="3"></circle>
<line x1="327" y1="600" x2="400" y2="673" stroke-width="0.86"></line>
<circle cx="300" cy="500" r="3"></circle>
<line x1="300" y1="500" x2="327" y2="600" stroke-width="0.45"></line>
</g><g>
<circle cx="260" cy="500" r="3"></circle>
<circle cx="292" cy="380" r="3"></circle>
<line x1="292" y1="380" x2="260" y2="500" stroke-width="1.31"></line>
<circle cx="380" cy="292" r="3"></circle>
<line x1="380" y1="292" x2="292" y2="380" stroke-width="1.05"></line>
<circle cx="500" cy="260" r="3"></circle>
<line x1="500" y1="260" x2="380" y2="292" stroke-width="1.26"></line>
<circle cx="620" cy="292" r="3"></circle>
<line x1="620" y1="292" x2="500" y2="260" stroke-width="0.59"></line>
<circle cx="708" cy="380" r="3"></circle>
<line x1="708" y1="380" x2="620" y2="292" stroke-width="0.89"></line>
<circle cx="740" cy="500" r="3"></circle>
<line x1="740" y1="500" x2="708" y2="380" stroke-width="0.36"></line>
<circle cx="708" cy="620" r="3"></circle>
<line x1="708" y1="620" x2="740" y2="500" stroke-width="1.01"></line>
<circle cx="620" cy="708" r="3"></circle>
<line x1="620" y1="708" x2="708" y2="620" stroke-width="1.03"></line>
<circle cx="500" cy="740" r="3"></circle>
<line x1="500" y1="740" x2="620" y2="708" stroke-width="0.78"></line>
<circle cx="380" cy="708" r="3"></circle>
<line x1="380" y1="708" x2="500" y2="740" stroke-width="0.48"></line>
<circle cx="292" cy="620" r="3"></circle>
<line x1="292" y1="620" x2="380" y2="708" stroke-width="0.43"></line>
<circle cx="260" cy="500" r="3"></circle>
<line x1="260" y1="500" x2="292" y2="620" stroke-width="1.27"></line>
</g><g>
<circle cx="220" cy="500" r="3"></circle>
<circle cx="258" cy="360" r="3"></circle>
<line x1="258" y1="360" x2="220" y2="500" stroke-width="0.56"></line>
<circle cx="360" cy="258" r="3"></circle>
<line x1="360" y1="258" x2="258" y2="360" stroke-width="0.37"></line>
<circle cx="500" cy="220" r="3"></circle>
<line x1="500" y1="220" x2="360" y2="258" stroke-width="0.64"></line>
<circle cx="640" cy="258" r="3"></circle>
<line x1="640" y1="258" x2="500" y2="220" stroke-width="0.99"></line>
<circle cx="742" cy="360" r="3"></circle>
<line x1="742" y1="360" x2="640" y2="258" stroke-width="0.64"></line>
<circle cx="780" cy="500" r="3"></circle>
<line x1="780" y1="500" x2="742" y2="360" stroke-width="0.67"></line>
<circle cx="742" cy="640" r="3"></circl.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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