当前位置:Gxlcms > 前端框架 > 纯CSS3打造自行车

纯CSS3打造自行车

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

废话不想多说,我们直接上图和代码最实际。

我们先来看看效果图吧,看了效果图之后你们就会有动力去打造属于你们自己的自行车啦

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

以上就是纯CSS3打造自行车的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行