css3實現的賽道倒數計時奔跑效果

antzone發表於2017-03-23

分享一段程式碼例項，它利用css3實現了在賽道奔跑的效果。

並且具有倒數計時效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
  <style>
    body {
      background: #3cb464;
      overflow: hidden;
    }
 
    .container {
      position: absolute;
      width: 800px;
      height: 400px;
      left: 190px;
      top: 100px;
    }
 
      .container div,
      .container span {
        position: absolute;
      }
 
    .intem {
      width: 200px;
      height: 200px;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
 
    .container .wrap {
      width: 100px;
      height: 100px;
      bottom: 0;
      box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1);
      border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    }
 
    .eye {
      background: #fff;
      border-radius: 50%;
      border-top: 2px solid #111;
    }
 
      .eye span {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #232323;
      }
 
      .eye.left {
        top: 30px;
        left: 30px;
        width: 30px;
        height: 29px;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
      }
 
        .eye.left span {
          top: 12px;
          height: 9px;
          left: 12px;
        }
 
      .eye.right {
        top: 35px;
        right: 20px;
        width: 20px;
        height: 20px;
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
      }
 
    .container .eye.right span {
      top: 9px;
      left: 7px;
    }
 
    .mouth {
      width: 16px;
      height: 4px;
      bottom: 20px;
      background: #fff;
      border-radius: 60% 80% 50% 100%;
      left: 50px;
    }
 
    .arm {
      width: 15px;
      height: 16px;
      bottom: 28px;
      border-radius: 7px;
      -webkit-animation: arm 0.7s ease-in-out infinite;
      animation: arm 0.7s ease-in-out infinite;
    }
 
      .arm.left {
        left: -13px;
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
      }
 
      .arm.right {
        right: -13px;
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
      }
 
    #pink {
      z-index: 30;
      transform: translate(1200px,-200px);
      animation: run1 3s ease-in;
      animation-delay: 4.5s;
      animation-fill-mode: forwards;
    }
 
    #green {
      z-index: 40;
      -webkit-transform: scale(0.8) translate(1300px,-140px);
      transform: scale(0.8) translate(1500px,-150px);
      animation: run2 5s ease-in;
      animation-delay: 4.5s;
      animation-fill-mode: both;
    }
 
    #yellow {
      z-index: 50;
      -webkit-transform: scale(0.5) translate(2380px,-50px);
      transform: scale(0.5) translate(2380px,-50px);
      animation: run3 4.5s ease-in;
      animation-delay: 4.5s;
      animation-fill-mode: both;
    }
 
    @keyframes run1 {
      0% {
        transform: translate(1200px,-200px);
      }
 
      100% {
        transform: translate(30px,-10px);
      }
    }
 
    @keyframes run2 {
      0% {
        transform: scale(0.8) translate(1500px,-150px);
      }
 
      100% {
        transform: scale(0.8) translate(50px,100px);
      }
    }
 
    @keyframes run3 {
      0% {
        transform: scale(0.5) translate(2380px,-50px);
      }
 
      100% {
        transform: scale(0.5) translate(100px,350px);
      }
    }
 
    #pink .wrap,
    #pink .arm,
    #pink .foot,
    #pink .body {
      background: pink;
    }
 
    #pink .mouth {
      left: 43px;
      -webkit-animation: mounth 0.5s ease-in-out infinite;
      animation: mounth 0.5s ease-in-out infinite;
    }
 
    #green .wrap {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
 
    #green .mouth {
      left: 50px;
      height: 15px;
      width: 40px;
      -webkit-transform: rotate(2deg);
      transform: rotate(2deg);
      -webkit-animation: mounth 0.5s ease-in-out infinite;
      animation: mounth 0.5s ease-in-out infinite;
    }
 
    #green .wrap,
    #green .arm,
    #green .foot,
    #green .body {
      background: greenyellow;
    }
 
    #yellow .wrap {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }
 
    #yellow .mouth {
      left: 50px;
      width: 20px;
      height: 5px;
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
      -webkit-animation: mounth 0.5s ease-in-out infinite;
      animation: mounth 0.5s ease-in-out infinite;
    }
 
    #yellow .wrap,
    #yellow .arm,
    #yellow .foot,
    #yellow .body {
      background: paleturquoise;
    }
    /*道路*/
    .road {
      position: absolute;
      top: 100px;
      left: 0;
    }
 
    .line {
      width: 5000px;
      height: 50px;
      background: gray;
      border-top: 5px solid white;
      border-bottom: 5px solid white;
      border-radius: 0 60% 20% 0;
      transform: rotate(-10deg);
      position: absolute;
    }
 
    .line_start, .line_end {
      position: absolute;
      width: 50px;
      height: 160px;
      border-left: 3px dotted white;
    }
 
    .line_start {
      left: 320px;
      top: 390px;
      transform: rotate(-10deg);
    }
 
    .line_end {
      left: 1400px;
      top: 190px;
      transform: rotate(-20deg);
    }
 
    .road1 {
      top: -90px;
      left: -47px;
    }
 
    .road2 {
      top: -35px;
      left: -47px;
    }
 
    .road3 {
      top: 21px;
      left: -47px;
    }
 
    @keyframes arm {
      40% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
      }
 
      66% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }
    }
 
    @keyframes mounth {
      0%, 100% {
        height: 15px;
        width: 20px;
        border-radius: 50% 66% 50% 50%;
      }
 
      50% {
        height: 16px;
        bottom: 20px;
        border-radius: 100% 50% 100% 50%;
      }
    }
 
    .body {
      left: 20px;
      top: 100px;
      width: 60px;
      height: 80px;
      box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1);
      animation: move 0.5s ease-in-out infinite;
      border-radius: 45% 45% 20% 60%/40% 40% 49% 47%;
    }
 
    @keyframes move {
      0%, 100% {
        bottom: 0;
      }
 
      20% {
        bottom: 8px;
      }
 
      40% {
        bottom: 14px;
      }
 
      60% {
        bottom: 16px;
      }
 
      80% {
        bottom: 24px;
      }
    }
 
    .foot {
      position: relative;
      width: 30px;
      height: 70px;
      top: 170px;
      box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1);
      animation: move 0.5s ease-in-out infinite;
    }
 
      .foot.left {
        left: 20px;
        z-index: -1;
        position: absolute;
        transform: rotate(20deg);
        transform-origin: 0% 0%;
        animation-name: f_l;
        animation-fill-mode: both;
        border-radius: 80% 45% 60% 60%/40% 40% 49% 47%;
      }
 
      .foot.right {
        left: 50px;
        position: absolute;
        transform: rotate(-20deg);
        transform-origin: 100% 50%;
        animation-name: f_r;
        animation-fill-mode: both;
        border-radius: 80% 45% 60% 60%/40% 40% 49% 47%;
      }
 
    #pink .foot.left, #pink .foot.right {
      animation-direction: 1s;
      animation-timing-function: linear;
      animation-delay: 4.5s;
      animation-iteration-count: 6;
    }
 
    #green .foot.left, #green .foot.right {
      animation-direction: 0.5s;
      animation-timing-function: linear;
      animation-delay: 4.5s;
      animation-iteration-count: 10;
    }
 
    #yellow .foot.left, #yellow .foot.right {
      animation-direction: 0.1s;
      animation-timing-function: linear;
      animation-delay: 4.5s;
      animation-iteration-count: 10;
    }
 
    @keyframes f_l {
      50% {
        transform: rotate(-40deg);
        transform-origin: 0% 0%;
      }
    }
 
    @keyframes f_r {
      50% {
        transform: rotate(40deg);
        transform-origin: 0% 0%;
      }
    }
 
    .delay_time {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      height: 100px;
      width: 100px;
      border-radius: 100%;
      border: 2px solid #fff;
      opacity: 0;
      -webkit-animation: ball-scale-ripple 1s 1s 4 cubic-bezier(.21, .53, .56, .8);
      animation: ball-scale-ripple 1s 1s 4 cubic-bezier(.21, .53, .56, .8);
    }
 
    .three, .two, .one, .go {
      opacity: 0;
      animation: show 1s linear;
      position: absolute;
      left: 34%;
      top: 20%;
      font-size: 60px;
      font-weight: bold;
      color: white;
    }
 
    .three {
      animation-delay: 1s;
    }
 
    .two {
      animation-delay: 2s;
    }
 
    .one {
      animation-delay: 3s;
    }
 
    .go {
      animation-delay: 4s;
      left: 20%;
      top: 10%;
    }
 
    @keyframes show {
      0%,100% {
        opacity: 0;
      }
 
      50% {
        opacity: 1;
      }
    }
 
    @-webkit-keyframes ball-scale-ripple {
      0% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 1;
      }
 
      70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.7;
      }
 
      100% {
        opacity: 0.0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="intem" id="pink">
      <div class="wrap">
        <div class="left eye"><span></span></div>
        <div class="right eye"><span></span></div>
        <div class="mouth"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
        <div class="body"></div>
        <div class="foot right"></div>
        <div class="foot left"></div>
      </div>
    </div>
    <div class="intem" id="green">
      <div class="wrap">
        <div class="left eye"><span></span></div>
        <div class="right eye"><span></span></div>
        <div class="mouth"></div>
        <div class="body"></div>
        <div class="foot right"></div>
        <div class="foot left"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
      </div>
    </div>
    <div class="intem" id="yellow">
      <div class="wrap">
        <div class="left eye"><span></span></div>
        <div class="right eye"><span></span></div>
        <div class="mouth"></div>
        <div class="body"></div>
        <div class="foot right"></div>
        <div class="foot left"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
      </div>
    </div>
  </div>
  <div class="road">
    <div class="line road1">
    </div>
    <div class="line road2">
    </div>
    <div class="line road3">
    </div>
  </div>
 
  <div class="delay_time">
    <span class="three">3</span>
    <span class="two">2</span>
    <span class="one">1</span>
    <span class="go">go</span>
  </div>
  <div class="line_start"></div>
  <div class="line_end"></div>
</body>
</html>

CSS3動畫實現3D倒數計時效果
2018-08-01
CSSS3動畫3D
jQuery實現的按鈕可用倒數計時效果
2017-03-24
jQuery
js程式碼實現倒數計時秒殺的效果
2017-02-21
JS
Flutter倒數計時/計時器的實現
2019-04-10
Flutter
動畫合成小技巧！CSS 實現動感的倒數計時效果
2022-07-11
動畫CSS
原生js實現的天小時分鐘和秒倒數計時效果
2017-03-26
JS
倒數計時指定時間之後實現頁面跳轉效果
2017-03-20
簡單實現時間倒數計時與伺服器同步效果
2017-04-09
伺服器
js實現活動倒數計時
2018-05-30
JS
jQuery 倒數計時效果詳解
2018-11-28
jQuery
js實現指定時間倒數計時
2020-09-27
JS
jquery實現的點選進行倒數計時效果程式碼例項
2017-03-30
jQuery
jquery實現60秒倒數計時
2018-08-21
jQuery
用宏實現PPT倒數計時
2017-07-05
setTimeout倒數計時效果程式碼
2018-01-11
Jquery 實現頁面倒數計時的功能
2020-11-18
jQuery
js倒數計時實現傳送驗證碼倒數計時60s
2018-01-20
JS
js精確到天的倒數計時效果
2017-04-16
JS
JavaScript 前端倒數計時糾偏實現
2019-03-04
JavaScript前端
ReactiveCocoa 實現按鈕倒數計時
2018-11-17
React
js實現驗證碼倒數計時
2017-06-27
JS
Android 實現計數或者倒數計時計時器用法Demo
2014-01-08
Android
jQuery實現的文字輸入字數倒計效果程式碼
2017-03-07
jQuery
Android實現計時與倒數計時的幾種方法
2014-10-21
Android
jQuery倒數計時效果程式碼例項
2017-04-06
jQuery
Js Jquery 實現的按鈕倒數計時整理
2019-05-11
JSjQuery
Android 倒數計時的五種實現方式
2017-03-07
Android
javascript小時、分鐘和秒倒數計時效果
2017-04-10
JavaScript
css3和javascript實現的時鐘效果
2017-04-13
CSSS3JavaScript
直播平臺搭建，計時和倒數計時功能的分別實現
2022-07-11
微信開發之小程式實現倒數計時
2018-05-14
Ionic Angular 實現驗證碼倒數計時功能
2017-12-20
Angular
直播小程式原始碼，vue實現時間倒數計時
2023-03-13
原始碼Vue
按鈕倒數計時可用效果例項程式碼
2017-03-02
js驗證碼重新傳送倒數計時效果
2017-04-06
JS
商品搶購倒數計時效果程式碼例項
2018-07-09
CSS3實現王者匹配時的粒子動畫效果
2019-04-09
CSSS3動畫
直播電商原始碼，商品出售倒數計時的定時器效果
2021-11-05
原始碼定時器

css3實現的賽道倒數計時奔跑效果

相關文章