<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>化学元素周期表</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #333;
}
.element-top {
width: 80rem;
margin: 4rem auto;
display: flex;
justify-content: center;
align-items: flex-end;
}
.element-bottom {
width: 80rem;
margin: 1rem auto;
}
.column {
width: 4rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0rem 0.2rem;
}
.base-element {
width: 4rem;
height: 4rem;
font-size: 30px;
font-weight: bolder;
line-height: 3.5rem;
text-align: center;
cursor: pointer;
}
.column-element {
margin-top: 0.2rem;
}
.line {
width: 100%;
height: 4rem;
margin: 2rem auto;
display: flex;
justify-content: center;
}
.line-element {
margin: 0rem 0.2rem;
}
.base-color {
background: rgb(0, 43, 52);
color: rgb(119, 232, 255);
border: 4px solid rgb(119, 232, 255);
}
.color-1 {
background: rgb(52, 0, 9);
color: rgb(255, 119, 142);
border: 4px solid rgb(255, 119, 142);
}
.color-2 {
background: rgb(52, 16, 0);
color: rgb(255, 161, 119);
border: 4px solid rgb(255, 161, 119);
}
.color-3 {
background: rgb(45, 52, 0);
color: rgb(236, 255, 119);
border: 4px solid rgb(236, 255, 119);
}
.color-4 {
background: rgb(0, 52, 14);
color: rgb(119, 255, 155);
border: 4px solid rgb(119, 255, 155);
}
.color-5 {
background: rgb(0, 37, 52);
color: rgb(140, 119, 255);
border: 4px solid rgb(140, 119, 255);
}
.color-6 {
background: rgb(42, 0, 52);
color: rgb(235, 120, 255);
border: 4px solid rgb(235, 120, 255);
}
.color-7 {
background: rgb(217, 217, 217);
color: rgb(127, 127, 127);
border: 4px solid rgb(127, 127, 127);
}
.color-8 {
background: rgb(52, 25, 0);
color: rgb(255, 184, 119);
border: 4px solid rgb(255, 184, 119);
}
.color-9 {
background: rgb(52, 37, 0);
color: rgb(255, 216, 119);
border: 4px solid rgb(255, 216, 119);
}
.font-sm {
font-size: 25px;
}
.bg {
width: 100%;
height: 100%;
background: url("./bg.jpg");
background-size: 100%;
background-position: center;
position: fixed;
z-index: -1;
top: 0;
left: 0;
filter: blur(7px);
}
.base-element:hover {
animation: 1s linear;
transform: scale(1.5);
}
</style>
<body>
<div class="element-top">
<div class="column">
<div class="base-element column-element base-color">H</div>
<div class="base-element column-element color-1">Li</div>
<div class="base-element column-element color-1">Na</div>
<div class="base-element column-element color-1">Ka</div>
<div class="base-element column-element color-1">Rb</div>
<div class="base-element column-element color-1">Cs</div>
<div class="base-element column-element color-1">Fr</div>
</div>
<div class="column">
<div class="base-element column-element color-2">Be</div>
<div class="base-element column-element color-2">Mg</div>
<div class="base-element column-element color-2">Ca</div>
<div class="base-element column-element color-2">Sr</div>
<div class="base-element column-element color-2">Ba</div>
<div class="base-element column-element color-2">Ra</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Sc</div>
<div class="base-element column-element color-3">Y</div>
<div class="base-element column-element color-3">La</div>
<div class="base-element column-element color-3">Ac</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Ti</div>
<div class="base-element column-element color-3">Zr</div>
<div class="base-element column-element color-3">Hf</div>
<div class="base-element column-element color-3">Rf</div>
</div>
<div class="column">
<div class="base-element column-element color-3">V</div>
<div class="base-element column-element color-3">Nb</div>
<div class="base-element column-element color-3">Ta</div>
<div class="base-element column-element color-3">Db</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Cr</div>
<div class="base-element column-element color-3">Mo</div>
<div class="base-element column-element color-3">W</div>
<div class="base-element column-element color-3">Sg</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Mn</div>
<div class="base-element column-element color-3">Tc</div>
<div class="base-element column-element color-3">Re</div>
<div class="base-element column-element color-3">Bh</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Fe</div>
<div class="base-element column-element color-3">Ru</div>
<div class="base-element column-element color-3">Os</div>
<div class="base-element column-element color-3">Hs</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Co</div>
<div class="base-element column-element color-3">Rh</div>
<div class="base-element column-element color-3">Lr</div>
<div class="base-element column-element color-3">Mt</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Ni</div>
<div class="base-element column-element color-3">Pd</div>
<div class="base-element column-element color-3">Pt</div>
<div class="base-element column-element color-3">Ds</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Cu</div>
<div class="base-element column-element color-3">Ag</div>
<div class="base-element column-element color-3">Au</div>
<div class="base-element column-element color-3">Rg</div>
</div>
<div class="column">
<div class="base-element column-element color-3">Zn</div>
<div class="base-element column-element color-3">Cd</div>
<div class="base-element column-element color-3">Hg</div>
<div class="base-element column-element color-3 font-sm">Uub</div>
</div>
<div class="column">
<div class="base-element column-element color-4">B</div>
<div class="base-element column-element color-4">Al</div>
<div class="base-element column-element color-4">Ga</div>
<div class="base-element column-element color-4">Ln</div>
<div class="base-element column-element color-4">Tl</div>
<div class="base-element column-element color-4 font-sm">Uut</div>
</div>
<div class="column">
<div class="base-element column-element base-color">C</div>
<div class="base-element column-element color-4">Si</div>
<div class="base-element column-element color-4">Ge</div>
<div class="base-element column-element color-4">Sn</div>
<div class="base-element column-element color-4">Pb</div>
<div class="base-element column-element color-4 font-sm">Uuq</div>
</div>
<div class="column">
<div class="base-element column-element base-color">N</div>
<div class="base-element column-element base-color">P</div>
<div class="base-element column-element color-4">As</div>
<div class="base-element column-element color-4">Sb</div>
<div class="base-element column-element color-4">Bi</div>
<div class="base-element column-element color-4 font-sm">Uup</div>
</div>
<div class="column">
<div class="base-element column-element base-color">O</div>
<div class="base-element column-element base-color">S</div>
<div class="base-element column-element base-color">Se</div>
<div class="base-element column-element color-4">Te</div>
<div class="base-element column-element color-4">Po</div>
<div class="base-element column-element color-4 font-sm">Uuh</div>
</div>
<div class="column">
<div class="base-element column-element color-5">F</div>
<div class="base-element column-element color-5">Cl</div>
<div class="base-element column-element color-5">Br</div>
<div class="base-element column-element color-5">I</div>
<div class="base-element column-element color-5">At</div>
<div class="base-element column-element color-7 font-sm">Uus</div>
</div>
<div class="column">
<div class="base-element column-element color-6">He</div>
<div class="base-element column-element color-6">Ne</div>
<div class="base-element column-element color-6">Ar</div>
<div class="base-element column-element color-6">Kr</div>
<div class="base-element column-element color-6">Xe</div>
<div class="base-element column-element color-6">Rn</div>
<div class="base-element column-element color-6 font-sm">Uuo</div>
</div>
</div>
<div class="element-bottom">
<div class="line">
<div class="base-element line-element color-8">La</div>
<div class="base-element line-element color-8">Ce</div>
<div class="base-element line-element color-8">Pr</div>
<div class="base-element line-element color-8">Nd</div>
<div class="base-element line-element color-8">Pm</div>
<div class="base-element line-element color-8">Sm</div>
<div class="base-element line-element color-8">Eu</div>
<div class="base-element line-element color-8">Gd</div>
<div class="base-element line-element color-8">Tb</div>
<div class="base-element line-element color-8">Dy</div>
<div class="base-element line-element color-8">Ho</div>
<div class="base-element line-element color-8">Tm</div>
<div class="base-element line-element color-8">Yb</div>
<div class="base-element line-element color-8">Lu</div>
</div>
<div class="line">
<div class="base-element line-element color-9">Ac</div>
<div class="base-element line-element color-9">Th</div>
<div class="base-element line-element color-9">Pa</div>
<div class="base-element line-element color-9">U</div>
<div class="base-element line-element color-9">Np</div>
<div class="base-element line-element color-9">Pu</div>
<div class="base-element line-element color-9">Am</div>
<div class="base-element line-element color-9">Cm</div>
<div class="base-element line-element color-9">Bk</div>
<div class="base-element line-element color-9">Cf</div>
<div class="base-element line-element color-9">Es</div>
<div class="base-element line-element color-9">Mc</div>
<div class="base-element line-element color-9">No</div>
<div class="base-element line-element color-9">Lr</div>
</div>
</div>
<div class="bg"></div>
</body>
</html>
