css-3

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

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

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

专栏也更新了一小半了,不知道大家都学到了吗?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;
}

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

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;
}

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

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

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;
}

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

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;
}

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

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%;
}

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

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

我们怎么解决呢?

根据上面的经验,我们是不是可以设置边框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%;
}

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

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

.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;
}

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

也是想要的效果,下面我们添加斗篷上面的骨针

更多精彩内容,可以点击“立即支付”,查看隐藏内容哦!

资源下载价格2立即支付    升级VIP后免费升级VIP,支付前请先登录,支付前请先登录,支付前请先登录!
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!

(3)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注