当前位置：Gxlcms > css > css3实现动画自行车效果

css3实现动画自行车效果

时间：2021-07-01 10:21:17 帮助过：33人阅读

这次给大家带来css3实现动画自行车效果，css3实现动画自行车效果的注意事项有哪些，下面就是实战案例，一起来看一下。

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

实例源码：

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>自行车</title>
  6.   <style type="text/css">
  7.    * {
  8.     margin: 0;
  9.     padding: 0
  10.    }
  11.    
  12.    ol,
  13.    ul {
  14.     list-style: none/*去掉圆点或数字*/
  15.    }
  16.    
  17.    .cycle-outer {
  18.     width: 534px;
  19.     height: 260px;
  20.     position: absolute;
  21.     /*绝对定位*/
  22.     top: 50%;
  23.     /*距离顶部*/
  24.     margin: -160px 0 0 -267px;
  25.     /*距离外边距*/
  26.     left: 50%;
  27.    }
  28.    
  29.    .cycle-wrapper {
  30.     width: 534px;
  31.     height: 260px;
  32.     margin: 0 auto;
  33.     position: relative;
  34.     /*相对定位*/
  35.    }
  36.    
  37.    .cycle-wheel-front {
  38.     /*前轮*/
  39.     margin: 100px 0 0 330px;
  40.    }
  41.    
  42.    .cycle-wheel-back {
  43.     /*后轮*/
  44.     margin: 100px 0 0 0px;
  45.    }
  46.    
  47.    .cycle-wheel-outer {
  48.     background: transparent;
  49.     border: 5px solid #aaa;
  50.     border-radius: 50%;
  51.     /*画外轮圆圈*/
  52.     width: 190px;
  53.     height: 190px;
  54.     position: absolute;
  55.     margin-top: 5px;
  56.     animation: wheel-rotate 2s linear infinite;
  57.     /*定义动画*/
  58.    }
  59.    /*轮胎开始旋转*/
  60.    @keyframes wheel-rotate {
  61.     from {
  62.      transform: rotate(0deg);
  63.     }
  64.     to {
  65.      transform: rotate(360deg);
  66.     }
  67.    }
  68.    
  69.    .cycle-wheel-outer:after {
  70.     /*插入内轮胎圆圈*/
  71.     background: transparent;
  72.     border: 4px solid #EF9058;
  73.     border-radius: 50%;
  74.     width: 176px;
  75.     height: 176px;
  76.     position: absolute;
  77.     margin: 3px;
  78.     content: "";
  79.    }
  80.    
  81.    .spoke {
  82.     /*开始画车轮线条*/
  83.     position: absolute;
  84.     width: 1px;
  85.     height: 200px;
  86.     background: #ccc;
  87.     margin: -5px 0 0 95px;
  88.     z-index: 0;
  89.    }
  90.    
  91.    .spoke:after {
  92.     /*在后面插入两条*/
  93.     content: "";
  94.     position: absolute;
  95.     width: 1px;
  96.     height: 200px;
  97.     background: #ccc;
  98.     transform: rotate(120deg);
  99.    }
  100.    
  101.    .spoke:before {
  102.     /*在前面插入两条*/
  103.     content: "";
  104.     position: absolute;
  105.     width: 1px;
  106.     height: 200px;
  107.     background: #ccc;
  108.     transform: rotate(240deg);
  109.    }
  110.    /*轮胎线条完成*/
  111.    
  112.    .spoke-container li:nth-child(2) {
  113.     /*中心点旋转*/
  114.     transform: rotate(30deg);
  115.    }
  116.    
  117.    .inner-disc {
  118.     /*画中心轴圆点*/
  119.     background: #666;
  120.     width: 20px;
  121.     height: 20px;
  122.     border-radius: 50%;
  123.     position: absolute;
  124.     left: 50%;
  125.     margin: -10px 0 0 -10px;
  126.     top: 50%;
  127.    }
  128.    /*.cycle-wheel-back .inner-disc:after {
  129.     content: "";
  130.     background: #666;
  131.     width: 20px;
  132.     height: 20px;
  133.     border-radius: 50%;
  134.     position: absolute;
  135.     left: 50%;
  136.     margin: -10px 0 0 -10px;
  137.     top: 50%;
  138.    }*/
  139.    
  140.    .inner-disc-2 {
  141.     /*画轮胎中心轴的圆圈*/
  142.     background: transparent;
  143.     width: 6px;
  144.     height: 6px;
  145.     border: 2px solid #FFF;
  146.     border-radius: 50%;
  147.     position: absolute;
  148.     left: 50%;
  149.     margin: -5px 0 0 -5px;
  150.     top: 50%;
  151.    }
  152.    
  153.    .cycle-wheel-back .inner-disc-2:after {
  154.     /*插入后轮轴心齿轮*/
  155.     content: "";
  156.     background: transparent;
  157.     width: 18px;
  158.     height: 18px;
  159.     border-radius: 50%;
  160.     position: absolute;
  161.     left: 50%;
  162.     margin: -13px 0 0 -13px;
  163.     top: 50%;
  164.     border: 4px dotted #666;
  165.    }
  166.    .cycle-body {
  167.     margin-left: 125px;
  168.    }
  169.    .front-wheel-frame {/*前叉*/
  170.     background: #5E999B;
  171.     width: 8px;
  172.     height: 180px;
  173.     position: absolute;
  174.     z-index: 2;
  175.     transform: rotate(-25deg);
  176.     margin: -72px 0 0 260px;
  177.    }
  178.    .top-frame {/*上管*/
  179.     background: #5E999B;
  180.     width: 180px;
  181.     height: 8px;
  182.     position: absolute;
  183.     z-index: 2;
  184.     margin: -20px 0 0 62px;
  185.     transform: rotate(-8deg);
  186.    }
  187.    .front-frame {/*下管*/
  188.     background: #5E999B;
  189.     width: 8px;
  190.     height: 160px;
  191.     position: absolute;
  192.     z-index: 2;
  193.     transform: rotate(41deg);
  194.     margin: -36px 0 0 189px;
  195.    }
  196.    .center-frame { /*坐杆*/
  197.     background: #5E999B;
  198.     width: 8px;
  199.     height: 205px;
  200.     position: absolute;
  201.     z-index: 2;
  202.     transform: rotate(-33deg);
  203.     margin: -84px 0 0 75px;
  204.    }
  205.    .back-frame {/*后管*/
  206.     background: #5E999B;
  207.     width: 8px;
  208.     height: 136px;
  209.     position: absolute;
  210.     z-index: 2;
  211.     transform: rotate(39deg);
  212.     margin: -23px 0 0 19px;
  213.    }
  214.    .bottom-frame {/*后叉or平管*/
  215.     background: #5E999B;
  216.     width: 159px;
  217.     height: 8px;
  218.     position: absolute;
  219.     z-index: 2;
  220.     margin: 100px 0 0 -16px;
  221.    }
  222.    .handlebar-front {/*车把*/
  223.     width: 60px;
  224.     height: 8px;
  225.     background: #5E999B;
  226.     z-index: 2;
  227.     position: absolute;
  228.     margin: -68px 0 0 222px;
  229.     border-top-left-radius: 3px;
  230.     border-bottom-left-radius: 3px;
  231.    }
  232.    .handlebar-curve {/*车把手*/
  233.     width: 40px;
  234.     height: 40px;
  235.     border: 8px solid #666;
  236.     border-top-right-radius: 100%;
  237.     border-bottom-right-radius: 100%;
  238.     border-bottom-left-radius: 100%;
  239.     background: transparent;
  240.     position: absolute;
  241.     margin: -68px 0 0 258px;
  242.     border-left: 8px solid transparent;
  243.     border-top: 8px solid #666;
  244.     border-bottom: 8px solid #666;
  245.    }
  246.    /*座垫*/
  247.    .seat { 
  248.     width: 50px;
  249.     height: 10px;
  250.     background: #666;
  251.     border-radius: 44%;
  252.     position: absolute;
  253.     margin: -73px 0 0 15px;
  254.    }
  255.    
  256.    .seat:after {
  257.     width: 0px;
  258.     height: 0px;
  259.     border-style: solid;
  260.     border-width: 0 40px 16px 40px;
  261.     border-color: transparent transparent #666 transparent;
  262.     content: "";
  263.     position: absolute;
  264.     z-index: 3;
  265.     transform: rotate(-12deg);
  266.     position: absolute;
  267.     border-radius: 100%;
  268.     margin: 0 0 0 -26px;
  269.    }
  270.    .seat:before {
  271.     width: 0px;
  272.     height: 0px;
  273.     border-style: solid;
  274.     border-width: 0 40px 16px 40px;
  275.     border-color: transparent transparent #666 transparent;
  276.     content: "";
  277.     position: absolute;
  278.     z-index: 3;
  279.     transform: rotate(179deg);
  280.     position: absolute;
  281.     border-radius: 100%;
  282.     margin: 0 0 0 -26px;
  283.    }
  284.    .seat span {
  285.     width: 32px;
  286.     height: 19px;
  287.     background: #666;
  288.     border-radius: 100%;
  289.     position: absolute;
  290.     margin: 1px 0 0 -22px;
  291.     transform: rotate(-11deg);
  292.    }
  293.    /*去掉中心轴的*/
  294.    .chain-rotation {
  295.     position: absolute;
  296.     z-index: 16;
  297.    }
  298.    /*中心轴*/
  299.    .chain-disc-inner {
  300.     background: #666;
  301.     width: 18px;
  302.     height: 18px;
  303.     border-radius: 50%;
  304.     position: absolute;
  305.     margin: 2px;
  306.     z-index: 4;
  307.    }
  308.    .chain-disc-outer {
  309.     background: #FFF;
  310.     width: 22px;
  311.     height: 22px;
  312.     border: 5px solid #666;
  313.     border-radius: 50%;
  314.     position: absolute;
  315.     margin: 87px 0 0 250px;
  316.     z-index: 3;
  317.     content: "";
  318.    }
  319.    /*牙盘*/
  320.    .chain-rods {
  321.     height: 70px;
  322.     width: 6px;
  323.     background: #666;
  324.     position: absolute;
  325.     margin: 67px 0 0 263px;
  326.     z-index: 15;
  327.     animation: wheel-rotate 2s linear infinite;
  328.    }
  329.    .chain-rods:before {
  330.     content: "";
  331.     height: 70px;
  332.     width: 6px;
  333.     background: #666;
  334.     position: absolute;
  335.     transform: rotate(120deg);
  336.    }
  337.    .chain-rods:after {
  338.     content: "";
  339.     height: 70px;
  340.     width: 6px;
  341.     background: #666;
  342.     position: absolute;
  343.     transform: rotate(240deg);
  344.     -webkit-transform: rotate(240deg);
  345.     -moz-transform: rotate(240deg);
  346.    }
  347.    .outer-axle {
  348.     height: 70px;
  349.     width: 70px;
  350.     border-radius: 50%;
  351.     background: transparent;
  352.     border: 5px solid #666;
  353.     position: absolute;
  354.     margin: 62px 0 0 226px;
  355.     z-index: 3;
  356.    }
  357.    
  358.    .outer-axle:after {
  359.     content: "";
  360.     height: 74px;
  361.     width: 74px;
  362.     border-radius: 50%;
  363.     background: transparent;
  364.     border: 5px dotted #666;
  365.     margin: -7px;
  366.     position: absolute;
  367.     z-index: 3;
  368.     animation: wheel-rotate 2s linear infinite;
  369.    }
  370.    /*车链子*/
  371.    .chain-up {
  372.     background-color: transparent;
  373.     background-size: 8px 2px;
  374.     background-position: 0 0, 30px 30px;
  375.     width: 155px;
  376.     height: 4px;
  377.     position: absolute;
  378.     z-index: 9;
  379.     background: #EEE;
  380.     transform: rotate(-11deg);
  381.     margin: 76px 0 0 98px;
  382.    }
  383.    .chain-up:before {
  384.     content: "";
  385.     background-color: transparent;
  386.     background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
  387.     background-size: 8px 2px;
  388.     background-position: 0 0, 30px 30px;
  389.     width: 155px;
  390.     height: 4px;
  391.     animation: chainUp 2s linear infinite;
  392.     position: absolute;
  393.     z-index: 10;
  394.    }
  395.    .chain-bottom {
  396.     background-color: transparent;
  397.     background-size: 8px 2px;
  398.     background-position: 0 0, 30px 30px;
  399.     width: 155px;
  400.     height: 4px;
  401.     position: absolute;
  402.     z-index: 9;
  403.     background: #EEE;
  404.     -webkit-transform: rotate(9deg);
  405.     -moz-transform: rotate(9deg);
  406.     transform: rotate(9deg);
  407.     margin: 127px 0 0 98px;
  408.    }
  409.    
  410.    .chain-bottom:before {
  411.     content: "";
  412.     background-color: transparent;
  413.     background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
  414.     background-size: 8px 2px;
  415.     background-position: 0 0, 30px 30px;
  416.     width: 155px;
  417.     height: 4px;
  418.     animation: chainDown 2s linear infinite;
  419.     position: absolute;
  420.     z-index: 10;
  421.    }
  422.    /*脚踏*/
  423.    .pedal-rod {
  424.     height: 120px;
  425.     width: 6px;
  426.     background: #666;
  427.     position: absolute;
  428.     margin: -25px 0 0 0px;
  429.    }
  430.    
  431.    .pedal-rod:before {
  432.     width: 40px;
  433.     height: 10px;
  434.     background: #666;
  435.     position: absolute;
  436.     margin: 10px;
  437.     content: "";
  438.     margin: -7px -17px;
  439.     animation: pedal1 2s linear infinite;
  440.    }
  441.    
  442.    .pedal-rod:after {
  443.     width: 40px;
  444.     height: 10px;
  445.     background: #666;
  446.     position: absolute;
  447.     margin: 10px;
  448.     content: "";
  449.     margin: 119px -17px;
  450.     animation: pedal2 2s linear infinite;
  451.    }
  452.    /*水壶架*/
  453.    .bottle-holder {
  454.     width: 20px;
  455.     height: 36px;
  456.     background: #daeded;
  457.     border: 3px solid #5E999B;
  458.     position: absolute;
  459.     margin: 54px 0 0 -25px;
  460.    }
  461.    
  462.    .bottle-holder:after {
  463.     width: 20px;
  464.     height: 3px;
  465.     content: "";
  466.     background: #5E999B;
  467.     position: absolute;
  468.     margin: 24px 0 0 0px;
  469.    }
  470.    /*水壶*/
  471.    .bottle-holder:before {
  472.     background-color: #daeded;
  473.     width: 18px;
  474.     height: 10px;
  475.     border-radius: 30% / 100%;
  476.     border-bottom-left-radius: 0;
  477.     border-bottom-right-radius: 0;
  478.     content: "";
  479.     position: absolute;
  480.     margin-top: -13px;
  481.     border: 1px solid #98baba;
  482.     border-bottom: 0;
  483.    }
  484.    .bottle-holder span {
  485.     position: absolute;
  486.     width: 9px;
  487.     height: 4px;
  488.     background: #666;
  489.     margin: -17px 0 0 5px;
  490.    }
  491.    /*车链子动画*/
  492.    @keyframes chainUp {
  493.     0% {
  494.      background-position: 0 25%;
  495.     }
  496.     100% {
  497.      background-position: 100% 0;
  498.     }
  499.    }
  500.    @keyframes chainDown {
  501.     0% {
  502.      background-position: 100% 0;
  503.     }
  504.     100% {
  505.      background-position: 0 25%;
  506.     }
  507.    }
  508.    /*脚踏动画*/
  509.    @keyframes pedal1 {
  510.     0% {
  511.      transform: rotate(00deg);
  512.     }
  513.     25% {
  514.      transform: rotate(-140deg);
  515.     }
  516.     50% {
  517.      transform: rotate(-180deg);
  518.     }
  519.     75% {
  520.      transform: rotate(-240deg);
  521.     }
  522.     100% {
  523.      transform: rotate(-360deg);
  524.     }
  525.    }
  526.    @keyframes pedal2 {
  527.     0% {
  528.      transform: rotate(00deg);
  529.     }
  530.     25% {
  531.      transform: rotate(-60deg);
  532.     }
  533.     50% {
  534.      transform: rotate(-180deg);
  535.     }
  536.     75% {
  537.      transform: rotate(-340deg);
  538.     }
  539.     100% {
  540.      transform: rotate(-360deg);
  541.     }
  542.    }
  543.   </style>
  544.  </head>
  545.  <body>
  546.   <p class="cycle-outer">
  547.    <p class="cycle-wrapper">
  548.     <!--
  549.                  描述：车架
  550.                 -->
  551.     <p class="cycle-body">
  552.      <p class="seat">
  553.       <span></span>
  554.      </p>
  555.      <p class="front-wheel-frame"></p>
  556.      
  557.      <p class="top-frame"></p>
  558.      <p class="front-frame">
  559.       <p class="bottle-holder">
  560.        <span></span>
  561.       </p>
  562.      </p>
  563.      <p class="center-frame"></p>
  564.      <p class="back-frame"></p>
  565.      <p class="bottom-frame"></p>
  566.      <p class="handlebar-front"></p>
  567.      <p class="handlebar-curve"></p>
  568.     </p>
  569.     <!--
  570.                  描述：后轮
  571.                 -->
  572.     <p class="cycle-wheel cycle-wheel-back">
  573.      <p class="cycle-wheel-outer">
  574.       <p class="cycle-wheel-inner">
  575.        <p class="cycle-wheel-inner-padding">
  576.         <ul class="spoke-container">
  577.          <li class="spoke"></li>
  578.          <li class="spoke"></li>
  579.         </ul>
  580.         <p class="inner-disc"></p>
  581.         <p class="inner-disc-2"></p>
  582.        </p>
  583.       </p>
  584.      </p>
  585.     </p>
  586.     <!--
  587.                  描述：前轮
  588.                 -->
  589.     <p class="cycle-wheel cycle-wheel-front">
  590.      <p class="cycle-wheel-outer">
  591.       <p class="cycle-wheel-inner">
  592.        <p class="cycle-wheel-inner-padding">
  593.         <ul class="spoke-container">
  594.          <li class="spoke"></li>
  595.          <li class="spoke"></li>
  596.         </ul>
  597.         <p class="inner-disc"></p>
  598.         <p class="inner-disc-2"></p>
  599.        </p>
  600.       </p>
  601.      </p>
  602.     </p>
  603.     <!--
  604.                  描述：中心轴  车链子 牙盘 水壶架  水壶   脚踏
  605.                 -->
  606.     <p class="chain-up"></p>
  607.     <p class="chain-bottom"></p>
  608.     <p class="chain-rotation">
  609.      <p class="outer-axle"></p>
  610.      <p class="chain-disc-outer">
  611.       <p class="chain-disc-inner"></p>
  612.      </p>
  613.     </p>
  614.     <p class="chain-rods">
  615.      <p class="pedal-rod"></p>
  616.     </p>
  617.    </p>
  618.   </p>
  619.   <p style="text-align:center;clear:both;">
  620.  </body>
  621. </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

css3多类选择器使用详解

css做出波纹动画

css的background-attachment进阶使用方法

以上就是css3实现动画自行车效果的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！