纯CSS3如何打造自行车动画效果?(代码实例)

纯CSS3如何打造自行车动画效果?下面本篇文章通过代码实例给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

我们先来看看效果图吧,看了效果图之后你们就会有动力去打造属于你们自己的自行车啦

1.gif

代码如下,复制即可用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快来打造属于你们自己的自行车吧</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0
}

ol,
ul {
  list-style: none/*去掉圆点或数字*/
}

.cycle-outer {
  width: 534px;
  height: 260px;
  position: absolute;
  /*绝对定位*/
  top: 50%;
  /*距离顶部*/
  margin: -160px 0 0 -267px;
  /*距离外边距*/
  left: 50%;
}

.cycle-wrapper {
  width: 534px;
  height: 260px;
  margin: 0 auto;
  position: relative;
  /*相对定位*/
}

.cycle-wheel-front {
  /*前轮*/
  margin: 100px 0 0 330px;
}

.cycle-wheel-back {
  /*后轮*/
  margin: 100px 0 0 0px;
}

.cycle-wheel-outer {
  background: transparent;
  border: 5px solid #aaa;
  border-radius: 50%;
  /*画外轮圆圈*/
  width: 190px;
  height: 190px;
  position: absolute;
  margin-top: 5px;
  animation: wheel-rotate 2s linear infinite;
  /*定义动画*/
}
/*轮胎开始旋转*/
@keyframes wheel-rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.cycle-wheel-outer:after {
  /*插入内轮胎圆圈*/
  background: transparent;
  border: 4px solid #EF9058;
  border-radius: 50%;
  width: 176px;
  height: 176px;
  position: absolute;
  margin: 3px;
  content: "";
}

.spoke {
  /*开始画车轮线条*/
  position: absolute;
  width: 1px;
  height: 200px;
  background: #ccc;
  margin: -5px 0 0 95px;
  z-index: 0;
}

.spoke:after {
  /*在后面插入两条*/
  content: "";
  position: absolute;
  width: 1px;
  height: 200px;
  background: #ccc;
  transform: rotate(120deg);
}

.spoke:before {
  /*在前面插入两条*/
  content: "";
  position: absolute;
  width: 1px;
  height: 200px;
  background: #ccc;
  transform: rotate(240deg);
}
/*轮胎线条完成*/

.spoke-container li:nth-child(2) {
  /*中心点旋转*/
  transform: rotate(30deg);
}

.inner-disc {
  /*画中心轴圆点*/
  background: #666;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin: -10px 0 0 -10px;
  top: 50%;
}

.inner-disc-2 {
  /*画轮胎中心轴的圆圈*/
  background: transparent;
  width: 6px;
  height: 6px;
  border: 2px solid #FFF;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin: -5px 0 0 -5px;
  top: 50%;
}

.cycle-wheel-back .inner-disc-2:after {
  /*插入后轮轴心齿轮*/
  content: "";
  background: transparent;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin: -13px 0 0 -13px;
  top: 50%;
  border: 4px dotted #666;
}
.cycle-body {
  margin-left: 125px;
}
.front-wheel-frame {/*前叉*/
  background: #5E999B;
  width: 8px;
  height: 180px;
  position: absolute;
  z-index: 2;
  transform: rotate(-25deg);
  margin: -72px 0 0 260px;
}
.top-frame {/*上管*/
  background: #5E999B;
  width: 180px;
  height: 8px;
  position: absolute;
  z-index: 2;
  margin: -20px 0 0 62px;
  transform: rotate(-8deg);
}
.front-frame {/*下管*/
  background: #5E999B;
  width: 8px;
  height: 160px;
  position: absolute;
  z-index: 2;
  transform: rotate(41deg);
  margin: -36px 0 0 189px;
}
.center-frame { /*坐杆*/
  background: #5E999B;
  width: 8px;
  height: 205px;
  position: absolute;
  z-index: 2;
  transform: rotate(-33deg);
  margin: -84px 0 0 75px;
}
.back-frame {/*后管*/
  background: #5E999B;
  width: 8px;
  height: 136px;
  position: absolute;
  z-index: 2;
  transform: rotate(39deg);
  margin: -23px 0 0 19px;
}
.bottom-frame {/*后叉or平管*/
  background: #5E999B;
  width: 159px;
  height: 8px;
  position: absolute;
  z-index: 2;
  margin: 100px 0 0 -16px;
}
.handlebar-front {/*车把*/
  width: 60px;
  height: 8px;
  background: #5E999B;
  z-index: 2;
  position: absolute;
  margin: -68px 0 0 222px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.handlebar-curve {/*车把手*/
  width: 40px;
  height: 40px;
  border: 8px solid #666;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  background: transparent;
  position: absolute;
  margin: -68px 0 0 258px;
  border-left: 8px solid transparent;
  border-top: 8px solid #666;
  border-bottom: 8px solid #666;
}
/*座垫*/
.seat { 
  width: 50px;
  height: 10px;
  background: #666;
  border-radius: 44%;
  position: absolute;
  margin: -73px 0 0 15px;
}

.seat:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 40px 16px 40px;
  border-color: transparent transparent #666 transparent;
  content: "";
  position: absolute;
  z-index: 3;
  transform: rotate(-12deg);
  position: absolute;
  border-radius: 100%;
  margin: 0 0 0 -26px;
}
.seat:before {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 40px 16px 40px;
  border-color: transparent transparent #666 transparent;
  content: "";
  position: absolute;
  z-index: 3;
  transform: rotate(179deg);
  position: absolute;
  border-radius: 100%;
  margin: 0 0 0 -26px;
}
.seat span {
  width: 32px;
  height: 19px;
  background: #666;
  border-radius: 100%;
  position: absolute;
  margin: 1px 0 0 -22px;
  transform: rotate(-11deg);
}
/*去掉中心轴的*/
.chain-rotation {
  position: absolute;
  z-index: 16;
}
/*中心轴*/
.chain-disc-inner {
  background: #666;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  margin: 2px;
  z-index: 4;
}
.chain-disc-outer {
  background: #FFF;
  width: 22px;
  height: 22px;
  border: 5px solid #666;
  border-radius: 50%;
  position: absolute;
  margin: 87px 0 0 250px;
  z-index: 3;
  content: "";
}
/*牙盘*/
.chain-rods {
  height: 70px;
  width: 6px;
  background: #666;
  position: absolute;
  margin: 67px 0 0 263px;
  z-index: 15;
  animation: wheel-rotate 2s linear infinite;
}
.chain-rods:before {
  content: "";
  height: 70px;
  width: 6px;
  background: #666;
  position: absolute;
  transform: rotate(120deg);
}
.chain-rods:after {
  content: "";
  height: 70px;
  width: 6px;
  background: #666;
  position: absolute;
  transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
}
.outer-axle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: transparent;
  border: 5px solid #666;
  position: absolute;
  margin: 62px 0 0 226px;
  z-index: 3;
}

.outer-axle:after {
  content: "";
  height: 74px;
  width: 74px;
  border-radius: 50%;
  background: transparent;
  border: 5px dotted #666;
  margin: -7px;
  position: absolute;
  z-index: 3;
  animation: wheel-rotate 2s linear infinite;
}
/*车链子*/
.chain-up {
  background-color: transparent;
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  position: absolute;
  z-index: 9;
  background: #EEE;
  transform: rotate(-11deg);
  margin: 76px 0 0 98px;
}
.chain-up:before {
  content: "";
  background-color: transparent;
  background-image: linear-gradient(90deg, #666 25%, transparent 25%,
   transparent 75%, #666 75%, #666);
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  animation: chainUp 2s linear infinite;
  position: absolute;
  z-index: 10;
}
.chain-bottom {
  background-color: transparent;
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  position: absolute;
  z-index: 9;
  background: #EEE;
  -webkit-transform: rotate(9deg);
  -moz-transform: rotate(9deg);
  transform: rotate(9deg);
  margin: 127px 0 0 98px;
}

.chain-bottom:before {
  content: "";
  background-color: transparent;
  background-image: linear-gradient(90deg, #666 25%, transparent 25%,
   transparent 75%, #666 75%, #666);
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  animation: chainDown 2s linear infinite;
  position: absolute;
  z-index: 10;
}
/*脚踏*/
.pedal-rod {
  height: 120px;
  width: 6px;
  background: #666;
  position: absolute;
  margin: -25px 0 0 0px;
}

.pedal-rod:before {
  width: 40px;
  height: 10px;
  background: #666;
  position: absolute;
  margin: 10px;
  content: "";
  margin: -7px -17px;
  animation: pedal1 2s linear infinite;
}

.pedal-rod:after {
  width: 40px;
  height: 10px;
  background: #666;
  position: absolute;
  margin: 10px;
  content: "";
  margin: 119px -17px;
  animation: pedal2 2s linear infinite;
}
/*水壶架*/
.bottle-holder {
  width: 20px;
  height: 36px;
  background: #daeded;
  border: 3px solid #5E999B;
  position: absolute;
  margin: 54px 0 0 -25px;
}

.bottle-holder:after {
  width: 20px;
  height: 3px;
  content: "";
  background: #5E999B;
  position: absolute;
  margin: 24px 0 0 0px;
}
/*水壶*/
.bottle-holder:before {
  background-color: #daeded;
  width: 18px;
  height: 10px;
  border-radius: 30% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  content: "";
  position: absolute;
  margin-top: -13px;
  border: 1px solid #98baba;
  border-bottom: 0;
}
.bottle-holder span {
  position: absolute;
  width: 9px;
  height: 4px;
  background: #666;
  margin: -17px 0 0 5px;
}
/*车链子动画*/
@keyframes chainUp {
  0% {
      background-position: 0 25%;
  }
  100% {
      background-position: 100% 0;
  }
}
@keyframes chainDown {
  0% {
      background-position: 100% 0;
  }
  100% {
      background-position: 0 25%;
  }
}
/*脚踏动画*/
@keyframes pedal1 {
  0% {
      transform: rotate(00deg);
  }
  25% {
      transform: rotate(-140deg);
  }
  50% {
      transform: rotate(-180deg);
  }
  75% {
      transform: rotate(-240deg);
  }
  100% {
      transform: rotate(-360deg);
  }
}
@keyframes pedal2 {
  0% {
      transform: rotate(00deg);
  }
  25% {
      transform: rotate(-60deg);
  }
  50% {
      transform: rotate(-180deg);
  }
  75% {
      transform: rotate(-340deg);
  }
  100% {
      transform: rotate(-360deg);
  }
}
</style>
</head>
<body>
<div class="cycle-outer">
<div class="cycle-wrapper">
  <!--
      描述:车架
  -->
  <div class="cycle-body">
      <div class="seat">
          <span></span>
      </div>
      <div class="front-wheel-frame"></div>
      <div class="top-frame"></div>
      <div class="front-frame">
          <div class="bottle-holder">
              <span></span>
          </div>
      </div>
      <div class="center-frame"></div>
      <div class="back-frame"></div>
      <div class="bottom-frame"></div>
      <div class="handlebar-front"></div>
      <div class="handlebar-curve"></div>
  </div>
  <!--
      描述:后轮
  -->
  <div class="cycle-wheel cycle-wheel-back">
      <div class="cycle-wheel-outer">
          <div class="cycle-wheel-inner">
              <div class="cycle-wheel-inner-padding">
                  <ul class="spoke-container">
                      <li class="spoke"></li>
                      <li class="spoke"></li>
                  </ul>
                  <div class="inner-disc"></div>
                  <div class="inner-disc-2"></div>
              </div>
          </div>
      </div>
  </div>
  <!--
      描述:前轮
  -->
  <div class="cycle-wheel cycle-wheel-front">
      <div class="cycle-wheel-outer">
          <div class="cycle-wheel-inner">
              <div class="cycle-wheel-inner-padding">
                  <ul class="spoke-container">
                      <li class="spoke"></li>
                      <li class="spoke"></li>
                  </ul>
                  <div class="inner-disc"></div>
                  <div class="inner-disc-2"></div>
              </div>
          </div>
      </div>
  </div>
  <!--
      描述:中心轴  车链子 牙盘 水壶架  水壶   脚踏
  -->
  <div class="chain-up"></div>
  <div class="chain-bottom"></div>
  <div class="chain-rotation">
      <div class="outer-axle"></div>
      <div class="chain-disc-outer">
          <div class="chain-disc-inner"></div>
      </div>
  </div>
  <div class="chain-rods">
      <div class="pedal-rod"></div>
  </div>
</div>
</div>
<div style="text-align:center;clear:both;">
</body>
</html>

更多web前端知识,请查阅 HTML中文网 !!

以上就是纯CSS3如何打造自行车动画效果?(代码实例)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏