炫酷的元素周期表html,HTML5 经典化学元素周期表
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;
}
炫酷的元素周期表html,HTML5 经典化学元素周期表相关推荐
- 炫酷的元素周期表html,经典化学元素周期表页面源码
分享一个超高级的元素周期表页面html源码,如果不显示自行替换里面JS文件 源码下载:炫酷的元素周期表html,经典化学元素周期表页面源码-小程序文档类资源-CSDN下载
- 基于three.js超级炫酷的元素周期表和中国地图（html版本和vue版本）
一.元素周期表 演示地址:https://demo.demohuo.top/jquery/10/1035/demo/ 效果图: 二.中国地图 效果图: 如果要使用在vue项目里,并且全屏显示 则需要通 ...
- 100套炫酷网站错误页Html5模板（403，404，500等）
在web项目开发中往往需要准备403.404.500等报错页面,网络上资源良莠不齐,而且大多数都是收费的,甚至一个页面一收费的那种,前前后后不管是自己开发的还是付费的收集了不少,于是打算整理下,免费分 ...
- 炫酷实用 7款jQuery/HTML5图片应用
2019独角兽企业重金招聘Python工程师标准>>> jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图 ...
- 基于three.js的3D炫酷元素周期表
最近在学习three.js在拿example中的项目练手,用了一整天的时间模仿了一个炫酷的元素周期表,在原有的基础上进行了一些改变.下面我会逐步讲解这个项目,算是加深理解,让大家提提意见. 因为我未搭 ...
- html炫酷在线,程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
- 图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用 近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...
- html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
- 8款炫酷的HTML5特效源码
HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色.今天,就给大家分享8个让人难忘的HTML5炫酷动画~ 1 ...
最新文章
- windows环境下，mysql的root密码丢失后重置方法
- linux 云主机 卡顿 排查过程
- 回顾inputstream和outputstream
- leetcode874
- python list遍历删除_Python中list循环遍历删除数据的正确方法
- 我的学生时代之一[小学时代]
- windows dc linux,active-directory – Linux AD集成,使用Windows Server 2012 DC时无法登录
- 数据结构之外部排序：失败树
- 计算机组成的ir是指,2002.10计算机组成原理§1控制器的基本概念⑵指令寄存器IR指令.ppt...
- AVR 工具指南（一）
- 智能机器人建房子后房价走势_日本房价走势分析：房产投资是否“未来可期”？...
- PL/SQL Developer图形化窗口创建数据库（表空间和用户）以及相关查询sql
- Tomcat(二)环境变量配置
- 设计模式(JAVA)——Facade模式
- 空间分析方法在计算机上的应用,常见的空间分析方法（很经典的总结）
- 安装webpack上
- rsa_eay_private_encrypt
- 数学建模对计算机考研有用吗,数学建模有必要参加吗
- 小海龟画图（小猪佩奇）
- 【Banana PI Leaf S3开发板试用体验】MicroPython环境搭建