点击上方 【蓝字】 关注我们
脚踏车效果图
马蜂窝逻辑
HTML 结构
-
定义了一个 HTML 页面，包含一个具有特定类名的容器，用于放置自行车元素，设置页面编码为 UTF-8 和中文语言。
CSS 样式部分 - 整体页面：
-
设置页面边距为 0，容器居中显示，最小高度为视口高度，自行车容器相对定位，宽高固定，子元素底部对齐并间隔排列。
CSS 样式部分 - 轮胎：
-
两个轮胎通过类名设置，有特定颜色和尺寸的边框、半径，使用伪元素创建内部和外部的装饰效果。
CSS 样式部分 - 踏板及相关部分：
-
踏板、踏板杆等元素通过绝对定位和特定尺寸、颜色、旋转角度来模拟自行车的踏板部分。
CSS 样式部分 - 座椅及相关部分：
-
座椅通过绝对定位、特定尺寸和颜色设置，还有伪元素来模拟座椅的支撑部分，其他杆状物同理设置。
代码
-
<html lang="zh"><head><meta charset="UTF-8" /><title>实现一辆自行车</title><style>body{margin:0px;}.container{position:relative;max-width:1000px;width:100%;margin:0px auto;display:flex;align-items:center;justify-content:center;min-height:100vh;}.cycle_container{position:relative;width:500px;height:400px;display:flex;align-items:flex-end;justify-content:space-between;}.tier{position:relative;width:200px;height:200px;border:20px solid #0f0f6a;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}.tier::after,.tier::before{position:absolute;content:'';border-radius:50%;box-sizing:border-box;}.tier:after{height:100%;width:100%;border:10px solid #ddd;}.tier::before{height:40px;width:40px;background:#0f0f6a;z-index:-1;}.pedle_round{position:absolute;height:40px;width:40px;background:#0f0f6a;border-radius:50%;box-sizing:border-box;top:74%;left:42%;}.pedle_round::after{position:absolute;content:'';height:140px;width:12px;background:#ddd;border-radius:20px;transform:rotate(278deg);top:-140%;right:193%;z-index:-1;}.pedle_round::before{position:absolute;content:'';height:123px;width:4px;background:#0f0f6a;transform:rotate(278deg);top:-98%;right:205%;}.seat{position:absolute;width:70px;height:20px;background:#0f0f6a;border-radius:12px;top:35%;left:23%;}.seat::after{position:absolute;content:'';width:48px;height:16px;border-radius:12px;background:#0f0f6a;top:-221%;left:253%;transform:rotate(9deg);}.front_rod{position:absolute;width:50px;height:15px;background:#ddd;top:28%;left:58%;transform:rotate(329deg);z-index:-1;border-radius:12px;}.front_rod::after,.front_rod::before{position:absolute;content:'';height:203px;width:12px;background:#ddd;border-radius:20px;transform:rotate(0deg);}.front_rod::before{right:368%;top:-56px;}.front_rod_outer{position:absolute;width:24px;height:3px;background:#0f0f6a;top:37%;left:58%;transform:rotate(56deg);border-radius:12px;}.side_rod{position:absolute;width:187px;height:15px;background:#ddd;top:54%;left:35%;transform:rotate(295deg);z-index:-1;border-radius:12px;}.side_rod::after{position:absolute;content:'';width:262px;height:15px;background:#ddd;top:-421%;left:-35%;transform:rotate(28deg);z-index:-1;border-radius:12px;}.side_rod_outer{position:absolute;width:48px;height:4px;background:#0f0f6a;top:46%;left:51%;transform:rotate(295deg);z-index:-1;border-radius:12px;}.side_rod_outer::after{position:absolute;content:'';width:30px;height:4px;background:#0f0f6a;top:-7px;left:38%;transform:rotate(28deg);z-index:-1;border-radius:12px;}.peddle{position:absolute;width:55px;height:15px;background:#0f0f6a;border-radius:12px;top:63%;left:46%;transform:rotate(23deg);}.peddle::after{position:absolute;content:'';width:55px;height:15px;background:#0f0f6a;border-radius:12px;top:115px;left:-21px;transform:rotate(18deg);}</style></head><body><div class="container"><div class="cycle_container"><div class="tier"></div><div class="tier"></div><div class="pedle_round"></div><div class="seat"></div><div class="front_rod"></div><div class="front_rod_outer"></div><div class="side_rod"></div><div class="side_rod_outer"></div><div class="peddle"></div></div></div></body></html>
√完整版代码
1.关注公众号
2.后台留言“脚踏车”获取完整代码