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>