HTML5 SVG化学元素周期表动画源码

HTML5 SVG化学元素周期表动画源码

HTML5 SVG化学元素周期表动画源码-LaokNas网络技术笔记

 

<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
喜欢就支持一下吧
点赞1 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片