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(.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="alk"> <abbr title="Potassium">K</abbr> </li> <li data-mass="40.078" class="aec"> <abbr title="Calcium">Ca</abbr> </li> <li data-mass="44.9559" class="trn"> <abbr title="Scandium">Sc</abbr> </li> <li data-mass="47.867" class="trn"> <abbr title="Titanium">Ti</abbr> </li> <li data-mass="50.9415" class="trn"> <abbr title="Vanadium">V</abbr> </li> <li data-mass="51.9961" class="trn"> <abbr title="Chromium">Cr</abbr> </li> <li data-mass="54.938" class="trn"> <abbr title="Manganese">Mn</abbr> </li> <li data-mass="55.845" class="trn"> <abbr title="Iron">Fe</abbr> </li> <li data-mass="58.9332" class="trn"> <abbr title="Cobalt">Co</abbr> </li> <li data-mass="58.6934" class="trn"> <abbr title="Nickel">Ni</abbr> </li> <li data-mass="63.546" class="trn"> <abbr title="Copper">Cu</abbr> </li> <li data-mass="65.38" class="trn"> <abbr title="Zinc">Zn</abbr> </li> <li data-mass="69.723" class="trm"> <abbr title="Gallium">Ga</abbr> </li> <li data-mass="72.64" class="trm"> <abbr title="Germanium">Ge</abbr> </li> <li data-mass="74.9216" class="met"> <abbr title="Arsenic">As</abbr> </li> <li data-mass="78.96" class="rnm"> <abbr title="Selenium">Se</abbr> </li> <li data-mass="79.904" class="hln"> <abbr title="Bromine">Br</abbr> </li> <li data-mass="83.798" class="nbl"> <abbr title="Krypton">Kr</abbr> </li> <li data-mass="85.4678" class="alk"> <abbr title="Rubidium">Rb</abbr> </li> <li data-mass="87.62" class="aec"> <abbr title="Strontium">Sr</abbr> </li> <li data-mass="88.9059" class="trn"> <abbr title="Yttrium">Y</abbr> </li> <li data-mass="91.224" class="trn"> <abbr title="Zirconium">Zr</abbr> </li> <li data-mass="92.9064" class="trn"> <abbr title="Niobium">Nb</abbr> </li> <li data-mass="95.94" class="trn"> <abbr title="Molybdenum">Mo</abbr> </li> <li data-mass="98" class="trn"> <abbr title="Technetium">Tc</abbr> </li> <li data-mass="101.07" class="trn"> <abbr title="Ruthenium">Ru</abbr> </li> <li data-mass="102.9055" class="trn"> <abbr title="Rhodium">Rh</abbr> </li> <li data-mass="106.42" class="trn"> <abbr title="Palladium">Pd</abbr> </li> <li data-mass="107.8682" class="trn">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0