模仿地球引力坠落效果

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、查看效果。