炫酷的元素周期表html,HTML5 经典化学元素周期表

最新推荐文章于 2024-11-19 12:23:56 发布

转载最新推荐文章于 2024-11-19 12:23:56 发布 · 979 阅读

文章标签：

#炫酷的元素周期表html

本文详细介绍如何使用CSS和SCSS为元素周期表创建动态样式，包括颜色渐变、定位和过渡效果，使元素更直观地展示化学元素特性。

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

padding: 40px 20px 20px;

font-family: 'Roboto', sans-serif;

background: #222;

}

.container {

margin: 0 auto;

}

#table {

width: 1260px;

margin-bottom: 20px;

}

#table-lanthanoids,

#table-actinoids {

width: 1050px;

}

.element {

position: relative;

float: left;

width: 70px;

height: 70px;

text-align: center;

color: white;

font-size: 11px;

font-weight: 100;

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

text-decoration: none;

transition: all 0.2s ease-in-out;

}

.element .symbol {

line-height: 70px;

font-size: 240%;

font-weight: 300;

}

.element .id,

.element .mass {

position: absolute;

opacity: 0.9;

}

.element .id {

top: 2px;

left: 2px;

}

.element .mass {

bottom: 2px;

left: 0;

right: 0;

}

.element.noble {

background: -webkit-linear-gradient(top left, #7e57c2, #673ab7);

background: -moz-linear-gradient(top left, #7e57c2, #673ab7);

background: -ms-linear-gradient(top left, #7e57c2, #673ab7);

background: -o-linear-gradient(top left, #7e57c2, #673ab7);

background: linear-gradient(top left, #7e57c2, #673ab7);

}

.element.alkali {

background: -webkit-linear-gradient(top left, #ef5350, #f44336);

background: -moz-linear-gradient(top left, #ef5350, #f44336);

background: -ms-linear-gradient(top left, #ef5350, #f44336);

background: -o-linear-gradient(top left, #ef5350, #f44336);

background: linear-gradient(top left, #ef5350, #f44336);

}

.element.alkaline {

background: -webkit-linear-gradient(top left, #ff7043, #ff5722);

background: -moz-linear-gradient(top left, #ff7043, #ff5722);

background: -ms-linear-gradient(top left, #ff7043, #ff5722);

background: -o-linear-gradient(top left, #ff7043, #ff5722);

background: linear-gradient(top left, #ff7043, #ff5722);

}

.element.transition {

background: -webkit-linear-gradient(top left, #ff9800, #fb8c00);

background: -moz-linear-gradient(top left, #ff9800, #fb8c00);

background: -ms-linear-gradient(top left, #ff9800, #fb8c00);

background: -o-linear-gradient(top left, #ff9800, #fb8c00);

background: linear-gradient(top left, #ff9800, #fb8c00);

}

.element.poor {

background: -webkit-linear-gradient(top left, #66bb6a, #4caf50);

background: -moz-linear-gradient(top left, #66bb6a, #4caf50);

background: -ms-linear-gradient(top left, #66bb6a, #4caf50);

background: -o-linear-gradient(top left, #66bb6a, #4caf50);

background: linear-gradient(top left, #66bb6a, #4caf50);

}

.element.metalloid {

background: -webkit-linear-gradient(top left, #26c6da, #00bcd4);

background: -moz-linear-gradient(top left, #26c6da, #00bcd4);

background: -ms-linear-gradient(top left, #26c6da, #00bcd4);

background: -o-linear-gradient(top left, #26c6da, #00bcd4);

background: linear-gradient(top left, #26c6da, #00bcd4);

}

.element.nonmetal {

background: -webkit-linear-gradient(top left, #42a5f5, #2196f3);

background: -moz-linear-gradient(top left, #42a5f5, #2196f3);

background: -ms-linear-gradient(top left, #42a5f5, #2196f3);

background: -o-linear-gradient(top left, #42a5f5, #2196f3);

background: linear-gradient(top left, #42a5f5, #2196f3);

}

.element.halogen {

background: -webkit-linear-gradient(top left, #5c6bc0, #3f51b5);

background: -moz-linear-gradient(top left, #5c6bc0, #3f51b5);

background: -ms-linear-gradient(top left, #5c6bc0, #3f51b5);

background: -o-linear-gradient(top left, #5c6bc0, #3f51b5);

background: linear-gradient(top left, #5c6bc0, #3f51b5);

}

.element.lanthanoid {

background: -webkit-linear-gradient(top left, #7e57c2, #673ab7);

background: -moz-linear-gradient(top left, #7e57c2, #673ab7);

background: -ms-linear-gradient(top left, #7e57c2, #673ab7);

background: -o-linear-gradient(top left, #7e57c2, #673ab7);

background: linear-gradient(top left, #7e57c2, #673ab7);

}

.element.actinoid {

background: -webkit-linear-gradient(top left, #ab47bc, #9c27b0);

background: -moz-linear-gradient(top left, #ab47bc, #9c27b0);

background: -ms-linear-gradient(top left, #ab47bc, #9c27b0);

background: -o-linear-gradient(top left, #ab47bc, #9c27b0);

background: linear-gradient(top left, #ab47bc, #9c27b0);

}

#el2 {

margin-left: 1120px;

}

#el5,

#el13 {

margin-left: 700px;

}

.clearfix {

clear: both;

}

.transp {

opacity: 0.25;

}