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

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

代码语言：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(.nb.........完整代码请登录后点击上方下载按钮下载查看