div+css实现元素周期表筛选效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现元素周期表筛选效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  --scale: 1.3;
  font-family: system-ui, sans-serif;
  margin: .25em;
  padding: 0;
}

fieldset {
  border: 1px dashed color-mix(in srgb, currentColor, transparent 60%);
  display: grid;
  font-size: small;
  gap: .5ch;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  max-inline-size: 70ch;
  margin: 2em auto;
  padding: 1ch;
}

ol {
  all: unset;
  container-type: inline-size;
  counter-reset: element;
  display: grid; 
  font-size: 2cqi;
  gap: 1px;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(10, 1fr);

  /* Element name and abbreviation */
  abbr {
    display: grid;
    font-weight: 500;
    grid-area: 2 / 1 / 4 / 3;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    &::after {
      content: attr(title);
      display: block;
      font-size: 0.33em;
      font-weight: 400;
      place-self: end center;
    }
  }

  /* Element Box */
  li {
    aspect-ratio: 1 / 1;
    background: #EEE;
    counter-increment: element;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: .25ch;
    transition: scale .125s ease-in;
    &::before {
      content: counter(element);
    }
    &::after {
      content: attr(data-mass);
      grid-area: 1 / 2 / 2 / 2;
      justify-self: end;
    }
    &::before, &::after {
      font-size: .33em;
    }
    @media (hover: hover) {
      &:hover {
        box-shadow: 0 0 0 .25px #000;
        scale: var(--scale);
      }
    }

    /* Layout */
    &:nth-of-type(2) { grid-column: 18; }
    &:nth-of-type(5), &:nth-of-type(13) { grid-column: 13; }
    
    /* Lanthenides */
    &:nth-of-type(58) { grid-area: 9 / 4 / 9/ 4; }
    &:nth-of-type(59) { grid-area: 9 / 5 / 9/ 5; }
    &:nth-of-type(60) { grid-area: 9 / 6 / 9/ 6; }
    &:nth-of-type(61) { grid-area: 9 / 7 / 9/ 7; }
    &:nth-of-type(62) { grid-area: 9 / 8 / 9/ 8; }
    &:nth-of-type(63) { grid-area: 9 / 9 / 9/ 9; }
    &:nth-of-type(64) { grid-area: 9 / 10 / 9 / 10; }
    &:nth-of-type(65) { grid-area: 9 / 11 / 9 / 11; }
    &:nth-of-type(66) { grid-area: 9 / 12 / 9 / 12; }
    &:nth-of-type(67) { grid-area: 9 / 13 / 9 / 13; }
    &:nth-of-type(68) { grid-area: 9 / 14 / 9 / 14; }
    &:nth-of-type(69) { grid-area: 9 / 15 / 9 / 15; }
    &:nth-of-type(70) { grid-area: 9 / 16 / 9 / 16; }
    &:nth-of-type(71) { grid-area: 9 / 17 / 9 / 17; }

    /* Actinides */
    &:nth-of-type(90) { grid-area: 10 / 4 / 10 / 4; }
    &:nth-of-type(91) { grid-area: 10 / 5 / 10 / 5; }
    &:nth-of-type(92) { grid-area: 10 / 6 / 10 / 6; }
    &:nth-of-type(93) { grid-area: 10 / 7 / 10 / 7; }
    &:nth-of-type(94) { grid-area: 10 / 8 / 10 / 8; }
    &:nth-of-type(95) { grid-area: 10 / 9 / 10 / 9; }
    &:nth-of-type(96) { grid-area: 10 / 10 / 10 / 10; }
    &:nth-of-type(97) { grid-area: 10 / 11 / 10 / 11; }
    &:nth-of-type(98) { grid-area: 10 / 12 / 10 / 12; }
    &:nth-of-type(99) { grid-area: 10 / 13 / 10 / 13; }
    &:nth-of-type(100) { grid-area: 10 / 14 / 10 / 14; }
    &:nth-of-type(101) { grid-area: 10 / 15 / 10 / 15; }
    &:nth-of-type(102) { grid-area: 10 / 16 / 10 / 16; }
    &:nth-of-type(103) { grid-area: 10 / 17 / 10 / 17; }
  }
}

/* Filter */
body:has(#alk:checked) li:not(.alk),
body:has(#aec:checked) li:not(.aec),
body:has(#trn:checked) li:not(.trn),
body:has(#trm:checked) li:not(.trm),
body:has(#met:checked) li:not(.met),
body:has(#rnm:checked) li:not(.rnm),
body:has(#hln:checked) li:not(.hln),
body:has(#nbl:checked) li:not(.nbl),
body:has(#lan:checked) li:not(.lan),
body:has(#act:checked) li:not(.act) { 
  opacity: 0.2;
}

/* Heisenberg Mode */
body:has(#brb:checked) {
  background: radial-gradient(circle, hsl(90, 67%, 22%) 10%, hsl(84, 71%, 7%) 40%, hsl(90, 100%, 8%) 100%);
  background-size: cover;
  color: #FFFFFF;
  li:not(:nth-of-type(35),:nth-of-type(56)) {
    --scale: 1;
    background-color: hsla(113, 40%, 4%, .5);
    color: hsla(120, 6%, 26%, .85);
  }
  :is(li:nth-of-type(35),li:nth-of-type(56)) {
    background: linear-gradient(135deg, #3E8467, #101F15);
    scale: var(--scale);
  }
}

/* Alkali Metals */
.alk {
  background-color: #ff6666;
}

/* Alkaline Earth Metals */
.aec {
  background-color: #ffdead;
}

/* Transition Metals */
.trn {
  background-color: #add8e6;
}

/* Post-Transition Metals */
.trm {
  background-color: #cccccc;
}

/* Metalloids (Semimetals) */
.met {
  background-color: #cccc99;
}

/* Reactive Non-Metals */
.rnm {
  background-color: #99ff99;
}

/* Halogens */
.hln {
  background-color: #ffff99;
}

/* Noble Gases */
.nbl {
  background-color: #ffb3e6;
}

/* Lanthanides */
.lan {
  background-color: #ffb366;
}

/* Actinides */
.act {
  background-color: #ff99cc;
}
</style>


  
  
</head>

<body translate="no">
  <ol>
  <li data-mass="1.0078" class="rnm">
    <abbr title="Hydrogen">H</abbr>
  </li>
  <li data-mass="4.0026" class="nbl">
    <abbr title="Helium">He</abbr>
  </li>
  <li data-mass="6.941" class="alk">
    <abbr title="Lithium">Li</abbr>
  </li>
  <li data-mass="9.0122" class="aec">
    <abbr title="Beryllium">Be</abbr>
  </li>
  <li data-mass="10.811" class="met">
    <abbr title="Boron">B</abbr>
  </li>
  <li data-mass="12.0107" class="rnm">
    <abbr title="Carbon">C</abbr>
  </li>
  <li data-mass="14.0067" class="rnm">
    <abbr title="Nitrogen">N</abbr>
  </li>
  <li data-mass="15.9994" class="rnm">
    <abbr title="Oxygen">O</abbr>
  </li>
  <li data-mass="18.9984" class="hln">
    <abbr title="Fluorine">F</abbr>
  </li>
  <li data-mass="20.1797" class="nbl">
    <abbr title="Neon">Ne</abbr>
  </li>
  <li data-mass="22.9897" class="alk">
    <abbr title="Sodium">Na</abbr>
  </li>
  <li data-mass="24.305" class="aec">
    <abbr title="Magnesium">Mg</abbr>
  </li>
  <li data-mass="26.9815" class="trm">
    <abbr title="Aluminium">Al</abbr>
  </li>
  <li data-mass="28.0855" class="met">
    <abbr title="Silicon">Si</abbr>
  </li>
  <li data-mass="30.9738" class="rnm">
    <abbr title="Phosphorus">P</abbr>
  </li>
  <li data-mass="32.065" class="rnm">
    <abbr title="Sulfur">S</abbr>
  </li>
  <li data-mass="35.453" class="hln">
    <abbr title="Chlorine">Cl</abbr>
  </li>
  <li data-mass="39.948" class="nbl">
    <abbr title="Argon">Ar</abbr>
  </li>
  <li data-mass="39.0983" class="a.........完整代码请登录后点击上方下载按钮下载查看