优先学

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 439|回复: 0

css3来实现属于自己的自行车

[复制链接]

10

主题

11

帖子

40

积分

新手上路

Rank: 1

积分
40
发表于 2018-3-5 15:03:19 | 显示全部楼层 |阅读模式

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|优先学

GMT+8, 2019-9-21 19:09 , Processed in 0.045284 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表