div+css实现蜘蛛网效果代码-html代码-BFW代码库

div+css实现蜘蛛网效果代码

代码语言：html

代码描述：div+css实现蜘蛛网效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* { margin: 0; padding: 0; box-sizing: border-box }
body { 
    background-color: #1D1E22;
    background-image: radial-gradient(#42093b, #1D1E22);
    height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.web {
  --size: 100vmin;
  --segments: 12;
  --line-color: rgb(255 255 255 / .5);
  
  /* working on this part to make more dynamic */
  --line-size: 0.25vmin;
  --line-spacing: 4.75vmin;
  /* --line-spacing: calc((var(--size) / 2) / var(--rings) - var(--line-size)); */
  /* --rings: 10; */
  
  filter: drop-shadow(0 0 2px black);
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
}
.web > span {
  --segment-angle: calc(360deg / var(--segments));
  grid-area: 1/1;
  display: grid;
  transform: rotate(calc(var(--segment-angle) * var(--idx)));
  border-radius: 50%;
}
/* lines */
.web > span::after {
  grid-area: 1/1;
  content: "";
  width: var(--line-size);
  justify-self: center;
  background-color: var(--line-color);
  --mask-image: linear-gradient(black 50%, transparent 50%);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  transform: rotate(calc(var(--segment-angle) / -2)) scaleY(5);
}
/* rings */
.web > span::before{
  content: "";
 .........完整代码请登录后点击上方下载按钮下载查看