CSS3 實現兩端擺動的小球效果

antzone發表於2017-05-13
CSSS3

分享一段程式碼例項，它實現了兩端擺動的小球效果。

類似於具有能量守恆功能一樣，可以傳動擺動。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>擺動的小球-螞蟻部落</title>
  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
    }

    .box {
      width: 1000px;
      height: 500px;
      border: 1px solid #fff;
      margin: 30px auto;
    }

    .support {
      width: 655px;
      height: 450px;
      margin: 15px auto;
      position: relative;
      padding: 0px 100px;
      background: #000;
      border-top: 20px solid #dcdcdc;
      border-radius: 15px;
      overflow: hidden;
    }

    .support>div {
      display: block;
      width: 130px;
      height: 500px;
      float: left;
      position: relative;
      top: -100px;
    }
    /* 連線點 */

    .support>div .spot {
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #dcdcdc;
      box-shadow: 0 0 8px 1px rgba(120, 120, 120, 1) inset, 0 0 12px 0 rgba(236, 236, 236, 1);
      position: absolute;
      bottom: 392px;
      left: 57px;
      z-index: 5;
    }
    /* 線 */

    .support>div .linellae {
      width: 0px;
      height: 400px;
      border-left: 2px solid #dcdcdc;
      margin: 0px auto;
      position: relative;
      top: -20px;
      z-index: 3;
    }
    /* 球 */

    .support>div .ball {
      width: 128px;
      height: 128px;
      background: #dcdcdc;
      border-radius: 100%;
      position: absolute;
      bottom: 0px;
      left: 0px;
      z-index: 2;
      box-shadow: 0 10px 75px 5px rgba(0, 0, 0, 1) inset, 0 5px 35px 0 rgba(236, 236, 236, 1);
    }
    /* 第一個 */

    .support .first .linellae {
      animation: firstlinellae 1.2s linear infinite;
      -moz-animation: firstlinellae 1.2s linear infinite;
      -webkit-animation: firstlinellae 1.2s linear infinite;
      -o-animation: firstlinellae 1.2s linear infinite;
    }

    .support .first .ball {
      animation: firstball 1.2s linear infinite;
      -moz-animation: firstball 1.2s linear infinite;
      -webkit-animation: firstball 1.2s linear infinite;
      -o-animation: firstball 1.2s linear infinite;
    }

    @keyframes firstball {
      0% {
        bottom: 0px;
        left: 0px;
      }
      25% {
        bottom: 15px;
        left: -80px;
      }
      50% {
        bottom: 0px;
        left: 0px;
      }
      100% {
        bottom: 0px;
        left: 0px;
      }
    }

    @keyframes firstlinellae {
      0% {
        left: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      25% {
        left: -16px;
        top: -26px;
        transform: rotate(13deg);
        -ms-transform: rotate(13deg);
        -moz-transform: rotate(13deg);
        -webkit-transform: rotate(13deg);
        -o-transform: rotate(13deg);
      }
      50% {
        left: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      100% {
        left: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
    }
    /* 最後一個 */

    .support .last .linellae {
      animation: lastlinellae 1.2s linear infinite;
      -moz-animation: lastlinellae 1.2s linear infinite;
      -webkit-animation: lastlinellae 1.2s linear infinite;
      -o-animation: lastlinellae 1.2s linear infinite;
    }

    .support .last .ball {
      animation: lastball 1.2s linear infinite;
      -moz-animation: lastball 1.2s linear infinite;
      -webkit-animation: lastball 1.2s linear infinite;
      -o-animation: lastball 1.2s linear infinite;
    }

    @keyframes lastball {
      0% {
        bottom: 0px;
        left: 0px;
      }
      50% {
        bottom: 0px;
        left: 0px;
      }
      75% {
        bottom: 15px;
        left: 80px;
      }
      100% {
        bottom: 0px;
        left: 0px;
      }
    }

    @keyframes lastlinellae {
      0% {
        right: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      50% {
        right: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      75% {
        right: -16px;
        top: -26px;
        transform: rotate(-13deg);
        -ms-transform: rotate(-13deg);
        -moz-transform: rotate(-13deg);
        -webkit-transform: rotate(-13deg);
        -o-transform: rotate(-13deg);
      }
      100% {
        right: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
    }
    /* 中間三個 */

    .support .other .linellae {
      animation: otherlinellae 1.2s linear 0.7s infinite;
      -moz-animation: otherlinellae 1.2s linear 0.7s infinite;
      -webkit-animation: otherlinellae 1.2s linear 0.7s infinite;
      -o-animation: otherlinellae 1.2s linear 0.7s infinite;
    }

    .support .other .ball {
      animation: otherball 1.2s linear 0.7s infinite;
      -moz-animation: otherball 1.2s linear 0.7s infinite;
      -webkit-animation: otherball 1.2s linear 0.7s infinite;
      -o-animation: otherball 1.2s linear 0.7s infinite;
    }

    @keyframes otherball {
      0% {
        bottom: 0px;
        left: 0px;
      }
      25% {
        bottom: 1px;
        left: 5px;
      }
      50% {
        bottom: 0px;
        left: 0px;
      }
      75% {
        bottom: 1px;
        left: -5px;
      }
      100% {
        bottom: 0px;
        left: 0px;
      }
    }

    @keyframes otherlinellae {
      0% {
        left: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      25% {
        left: 1px;
        top: -22px;
        transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -moz-transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
      }
      50% {
        left: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      75% {
        left: -1px;
        top: -22px;
        transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        -moz-transform: rotate(1deg);
        -webkit-transform: rotate(1deg);
        -o-transform: rotate(1deg);
      }
      100% {
        left: 0px;
        top: -20px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="support">
      <!-- 第一個 -->
      <div class="first">
        <div class="spot"></div>
        <!-- 連線點 -->
        <div class="linellae"></div>
        <!-- 線 -->
        <div class="ball"></div>
        <!-- 球 -->
      </div>
      <!-- 中間三個 -->
      <div class="other">
        <div class="spot"></div>
        <div class="linellae"></div>
        <div class="ball"></div>
      </div>
      <div class="other">
        <div class="spot"></div>
        <div class="linellae"></div>
        <div class="ball"></div>
      </div>
      <div class="other">
        <div class="spot"></div>
        <div class="linellae"></div>
        <div class="ball"></div>
      </div>
      <!-- 最後一個 -->
      <div class="last">
        <div class="spot"></div>
        <div class="linellae"></div>
        <div class="ball"></div>
      </div>
    </div>
  </div>
</body>

</html>

相關文章