请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

纯CSS3打造自行车

1
回复
1820
查看
[复制链接]

7

主题

23

帖子

94

积分

注册会员

Rank: 2

积分
94
2020-2-27 08:44:33 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
废话不想多说,我们直接上图和代码最实际。
我们先来看看效果图吧,看了效果图之后你们就会有动力去打造属于你们自己的自行车啦
1582610939252426.png
怎么样,帅不帅呀,快来打造帅帅的自行车吧
  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>
复制代码


回复

使用道具 举报

83

主题

178

帖子

1656

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1656
2020-2-27 09:58:24 显示全部楼层
我做了一下实验,果然行哎,不错~
回复

使用道具 举报

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