CSS简笔画：纯CSS绘制一辆婴儿车

Javanx

发布于 2020-07-27 14:41:56

5210

发布于 2020-07-27 14:41:56

文章被收录于专栏：web秀

CSS学习其实不难，难的是动手实践，当你看到一个效果是，觉得这个实现起来很难、很难，但是你一旦动手，一步一步分解实现，会发现也没有想象中的那么难。

下面我们动手写一个纯CSS婴儿车，你将学习到下列知识：

你能get到

1、CSS Flex水平垂直居中

2、CSS 变量（前面小节已经讲过）

3、CSS 伪类的灵活使用

4、CSS 相对定位和绝对定位

5、CSS 绘制半圆形扇形三角形

6、CSS transform 变形

看图解构

婴儿车结构很简单，从下至上，车轮、婴儿床、扶手、斗篷，复杂点的就是斗篷，因为斗篷上面有骨针，复杂点，最简单的就是车轮了，我们就从它开始。

婴儿车 html结构

<div class="baby-carriage">
  <!-- 婴儿床 -->
  <div class="bed">
    <!-- 扶手 -->
    <div class="handrail"></div>
    <!-- 斗篷 -->
    <div class="cloak"></div>
  </div>
  <!-- 车轮 -->
  <div class="wheel">
    <div class="before"></div>
    <div class="after"></div>
  </div>
</div>

CSS部分代码

1、定义CSS变量

:root{
  --bgColor:rgb(28, 194, 78);
  --lineColor: #fff;
}

2、婴儿车水平垂直居中

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bgColor);
}

.baby-carriage {
  position: relative;
  /* 下方代码为了看居中效果，后面去掉 */
  border: 1px solid var(--lineColor);
  width: 200px;
  height: 200px;
}

3、造两个轮子

.wheel{
  text-align: center;
}
.wheel>div{
  position: relative;
  border: 4px solid var(--lineColor);
  border-radius: 100%;
  display: inline-block;
  width: 50px;
  height: 50px;
}
.wheel>div:after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: var(--lineColor);
  margin-top: 50%;
  margin-left: 50%;
  left: -7.5px;
  top: -7.5px;
}
.wheel .before{
  margin-right: 30px;
}

利用border、border-radius，矩形圆角形成圆，然后利用伪类:after，形成车轮轴。

4、添加bed

css绘制一个半圆，即可。这里我们用白色画线条，background就用透明色，达到我们想要的效果

.bed{
  position: relative;
  width: 200px;
  height: 100px;
  border: 4px solid var(--lineColor);
  background-color: transparent;
  border-radius: 0 0 200px 200px;
}

5、添加扶手

这里就是个细节，耐心活了。可以用F12调试，调节元素的位置达到想要的效果。

.handrail{
  position: absolute;
  width: 10px;
  height: 158px;
  background: var(--lineColor);
  transform: rotate(36deg);
  left: 93px;
  bottom: -47px;
}
.handrail:before{
  position: absolute;
  content: '';
  display: block;
  width: 15px;
  height: 48px;
  background: var(--lineColor);
  transform: rotate(18deg);
  left: 4px;
  top: -44px;
  border-radius: 8px;
}
.handrail:after{
  position: absolute;
  content: '';
  display: block;
  width: 36px;
  height: 15px;
  background: var(--lineColor);
  transform: rotate(-36deg);
  left: 8px;
  top: -51px;
  border-radius: 8px;
}

6、添加斗篷

斗篷的形状就是个1/4圆/扇形

.cloak{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: var(--lineColor);
  border-radius:  100px 0 0 0;
  top: -102px;
  left: -4px;
  transform: rotate(0deg);
  transform-origin: 100% 100%;
}

但是这个扇形是实心的，和我们想要的效果不一样，

我们怎么解决呢？

根据上面的经验，我们是不是可以设置边框border，而不设置background-color呢？试试吧

.cloak{
  position: absolute;
  width: 100px;
  height: 100px;
  /* background-color: var(--lineColor); */
  border: 4px solid var(--lineColor);
  border-radius:  100px 0 0 0;
  top: -102px;
  left: -4px;
  transform: rotate(0deg);
  transform-origin: 100% 100%;
}

可以的！我们还可以用另外一种方式，再画一个扇形，不过颜色和背景色一致，然后覆盖到上一个扇形，并错位。试试看。

.cloak:before{
  position: absolute;
  content: '';
  display: block;
  width: 94px;
  height: 94px;
  background-color: var(--bgColor);
  border-radius:  100px 0 0 0;
  left: 4px;
  top: 4px;
}