前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS简笔画:纯CSS绘制一辆婴儿车

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结构

代码语言:javascript
复制
<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变量

代码语言:javascript
复制
:root{
  --bgColor:rgb(28, 194, 78);
  --lineColor: #fff;
}

2、婴儿车水平垂直居中

代码语言:javascript
复制
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、造两个轮子

代码语言:javascript
复制
.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;
}

利用borderborder-radius,矩形圆角形成圆,然后利用伪类:after,形成车轮轴。

4、添加bed

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

代码语言:javascript
复制
.bed{
  position: relative;
  width: 200px;
  height: 100px;
  border: 4px solid var(--lineColor);
  background-color: transparent;
  border-radius: 0 0 200px 200px;
}

5、添加扶手

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

代码语言:javascript
复制
.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圆/扇形

代码语言:javascript
复制
.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呢?试试吧

代码语言:javascript
复制
.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%;
}

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

代码语言:javascript
复制
.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;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 你能get到
  • 看图解构
  • 婴儿车 html结构
  • CSS部分代码
    • 1、定义CSS变量
      • 2、婴儿车水平垂直居中
        • 3、造两个轮子
          • 4、添加bed
            • 5、添加扶手
              • 6、添加斗篷
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档