首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

利用纯CSS3实现动态的自行车特效源码

Posted in HTML / CSS onJanuary 20, 2017

首先来看看实现的效果图（静态）：

利用纯CSS3实现动态的自行车特效源码

实例源码：

<!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%;
   }
   /*.cycle-wheel-back .inner-disc:after {
    content: "";
    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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以交流。

利用纯CSS3实现动态的自行车特效源码

- Author -

59580

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 #HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 #HTML / CSS
纯CSS3大转盘抽奖示例代码（响应式、可配置）
Jan 13 #HTML / CSS
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
Jan 12 #HTML / CSS
CSS3,线性渐变（linear-gradient）的使用总结
Jan 09 #HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 #HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 #HTML / CSS
Springboot-cli(1) Android(19) CompletableFuture(1) 主题(1) 线程池(1) ForkJoin(1) JAVA(88) FutureTask(3) Repository接口(3) 池化技术(1)
You might like
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
微信小程序从注册账号到上架（图文详解）
2019/07/17 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python全栈知识点总结
2019/07/01 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python对XML文件的操作实现代码
2020/03/27 Python
HTML5 video标签（播放器）学习笔记（一）:使用入门
2015/04/24 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
英国手工布艺沙发在线购买：Sofas & Stuff
2018/03/02 全球购物
哈利波特商店：Harry Potter Shop
2018/11/30 全球购物
英国在线定制百叶窗网站：Swift Direct Blinds
2020/02/25 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
正规的求职信范文分享
2013/12/11 职场文书
走群众路线学习笔记
2014/11/06 职场文书
劳模先进事迹材料
2014/12/24 职场文书
2015年端午节活动总结
2015/02/11 职场文书
民间借贷借条如何写
2015/05/26 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL