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=&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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