css calc() 属性设置宽度和高度的长度值，来绘制双螺旋结构，使用animation形成动态的DNA分子结构。

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入部分

<content>
  <div class="blueprint">
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="bar">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
  </div>
</content>

资源出处：https://www.moyublog.com/codes/9367.html