站長資訊網(wǎng)廢話不想多說，我們直接上圖和代碼最實際。
我們先來看看效果圖吧，看了效果圖之后你們就會有動力去打造屬于你們自己的自行車?yán)?/p>
怎么樣，帥不帥呀，快來打造帥帥的自行車吧
代碼如下，復(fù)制即可用，不過這是我的自行車，你們可不能盜取我的自行車哦
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>快來打造屬于你們自己的自行車吧</title> <style type="text/css"> * { margin: 0; padding: 0 } ol, ul { list-style: none/*去掉圓點或數(shù)字*/ } .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; /*定義動畫*/ } /*輪胎開始旋轉(zhuǎn)*/ @keyframes wheel-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cycle-wheel-outer:after { /*插入內(nèi)輪胎圓圈*/ 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) { /*中心點旋轉(zhuǎn)*/ 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%; } .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>
