css calc() 屬性設(shè)置寬度和高度的長度值,來繪制雙螺旋結(jié)構(gòu),使用animation形成動態(tài)的DNA分子結(jié)構(gòu)。
使用方法:
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>