首页 > 蚂蚁部落 > 正文

CSS3 实现两端摆动的小球效果
2017-08-29 10:17:39   来源:   评论:0 点击:

分享一段代码实例,它实现了两端摆动的小球效果。类似于具有能量守恒功能一样,可以传动摆动。代码实例如下:[HTML] 纯文本查看 复制代码&

分享一段代码实例,它实现了两端摆动的小球效果。

类似于具有能量守恒功能一样,可以传动摆动。

代码实例如下:

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

相关热词搜索:

上一篇:十六进制颜色转换为RGB代码实例
下一篇:JavaScript 函数递归

分享到: 收藏
评论排行