首页
所有分类
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 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
AmazeUI折叠式卡片布局，整合内容列表、表格组件实现
Aug 20 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
经纬度(1) html标准库(1) dll(1) 间隙锁(2) innoDB(3) MVCC(4) ctypes(1) 幻读(5) 复读(1) C/C++(1)
You might like
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
为你总结一些php信息函数
2015/10/21 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
理解python正则表达式
2016/01/15 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Python用户自定义异常的实现
2020/12/25 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
台湾母婴用品限时团购：妈咪爱
2018/08/03 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
安全协议书
2014/04/23 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2014年节能工作总结
2014/12/18 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL