HTML5 SVG化学元素周期表动画源码
<style>
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap");
body {
margin: 0;
justify-content: center;
background: #222831;
}
#container {
width: 95vw;
height: 55vw;
background: #262c35;
margin-top: 5vw;
position: relative;
border-radius: 5px;
margin-bottom: 5vw;
}
.element-name {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
font-family: "Merriweather", serif;
font-weight: 700;
}
.element-number {
position: absolute;
left: 50%;
top: 15%;
transform: translate(-50%, -50%);
font-size: 0.6vw;
}
.legend {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 0.8vw;
font-family: "Merriweather", serif;
font-weight: 700;
}
.svg {
width: 100%;
height: 100%;
}
</style>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 SVG化学元素周期表动画DEMO演示</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="container"></div>
<!-- partial -->
<script src='https://www.html5tricks.com/demo/html5-svg-periodic-table/d3.min.js'></script><script src="https://www.html5tricks.com/demo/html5-svg-periodic-table/script.js"></script>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
© 版权声明
THE END
