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

antzone發表於2017-05-13

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

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

程式碼例項如下:

[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>

canvas小球擺動效果
2018-03-15
Canvas
css3小球上下移動效果
2024-10-12
CSSS3
CSS3實現的小球旋轉載入等待效果
2017-02-17
CSSS3
CSS3矩形左右擺動效果
2017-02-27
CSSS3
CSS3小球靜態環繞效果
2018-11-22
CSSS3
css3實現的紅心跳動效果
2017-02-22
CSSS3
css3滑鼠懸浮小球彈性效果
2017-03-20
CSSS3
css3實現的立體滾動效果
2017-03-13
CSSS3
css3實現的滾動的檯球效果
2017-03-11
CSSS3
canvas小球落地彈動效果
2018-02-11
Canvas
canvas實現的彈力小球效果程式碼例項
2017-02-10
Canvas
js隨機運動小球效果
2017-04-17
JS隨機
純CSS3實現滑動開關效果
2015-08-17
CSSS3
jquery和css3實現的動態時鐘效果
2017-04-18
jQueryCSSS3
css3實現翻牌效果
2017-12-14
CSSS3
css3實現的矩形切角效果
2017-03-02
CSSS3
css3實現的動態大白效果程式碼例項
2017-02-20
CSSS3
css3實現線條環形動態運動效果
2017-03-26
CSSS3
canvas實現的小球四壁碰撞效果程式碼例項
2017-02-10
Canvas
css3實現的簡單動畫效果
2017-02-25
CSSS3動畫
canvas小球碰壁效果
2018-06-02
Canvas
js和css3實現360旋轉滾動效果
2017-04-14
JSCSSS3
css3實現的方塊迴圈翻滾跳動效果
2017-03-23
CSSS3
css3實現的動物頭像效果程式碼例項
2017-02-22
CSSS3
css3實現的皮球上下彈動效果程式碼例項
2017-02-23
CSSS3
Html5實現移動端、PC端刮刮卡效果
2020-09-22
HTML
css3實現的旋轉的陀螺效果
2017-03-07
CSSS3
css3實現動畫閃爍效果
2019-12-27
CSSS3動畫
css3實現元素垂直居中效果
2017-03-06
CSSS3
CSS3實現多種背景效果
2018-05-06
CSSS3
js和css3實現的空調效果
2017-04-15
JSCSSS3
css3和js實現的大白動畫效果
2017-04-14
CSSS3JS動畫
css3和javascript實現的時鐘效果
2017-04-13
CSSS3JavaScript
CSS3實現多樣的邊框效果
2018-05-03
CSSS3
CSS3實現的多重背景效果程式碼
2017-02-11
CSSS3
CSS3實現的頁面反轉效果
2017-02-11
CSSS3
css3實現的矩形圓角切角效果
2017-03-02
CSSS3
css3實現的立方體旋轉效果
2017-02-22
CSSS3

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

相關文章