模仿地球引力坠落效果

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代艨位雅剖码。<div id="a"> <div class="block_container"> <div class="handle_wrap"> <div class="handle"></div> </div> <div class="block"></div> </div> <div class="block_container"> <div class="handle_wrap"> <div class="handle"></div> </div> <div class="block"></div> </div> <div class="block_container"> <div class="handle_wrap"> <div class="handle"></div> </div> <div class="block"></div> </div></div>

4、书写css代码。* { margin: 0; padding: 0; list-style: none稆糨孝汶; }img { border: none; }body { font-size: 12px; }#a { height: 550px; background: #B4D7F4; width: 480px; margin: 0 auto; padding: 20px; }.block { width: 128px; height: 128px; background: url(../images/football.png) no-repeat; }.block_container { float: left; width: 128px; margin-left: 30px; }.handle_wrap { height: 50px; }.handle { width: 4px; height: 50px; background: #ff0000; cursor: pointer; margin-left: 62px; }

5、代码整体结构。

6、查看效果。