css-3

CSS简笔画:纯CSS绘制一艘邮轮

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

本节你能get到什么前端知识

1、CSS 变量

2、CSS 伪类的灵活使用

3、CSS 绘制 梯形、箭头、转发箭头

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

5、CSS transform 变形

6、CSS box-shadow

7、CSS Flex布局

看图解构

1、梯形船体

2、中间部分有一个镂空的梯形

3、船体上有船名、船锚

4、甲板上有护栏

5、船上有货物

6、还有一根旗杆

解构后发现东西并不多!

梯形船体

<div class="ship">
    <div class="ship-body"></div>
</div>
:root{
  --seaColor:#54a0ff;
  --lineColor: #fff;
  --enclosureColor: #000;
}
body {
  width: 100%;
  height: 100vh;
}
.ship{
  position: absolute;
  width: 480px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -240px;
  margin-top: -75px;
}
.ship-body{
  position: absolute;
  width: 480px;
  height: 150px;
  background: var(--seaColor);
  transform: rotate(180deg) perspective(3em) rotateX(9deg);
  z-index: 1;
  left: 50%;
  top: 50%;
  margin-left: -240px;
  margin-top: -75px;
}

这里用到了元素水平垂直居中的另外一种方式,让元素绝对定位,然后left/top=50%,然后margin-left/top=负元素宽度的一半,就可以居中了。

船体镂空梯形

这个也就非常简单了,在制作个小一些的白色梯形,覆盖到船体上方即可。

<div class="ship">
  ...
  <div class="ship-body-out"></div>
</div>
.ship-body-out{
  position: absolute;
  width: 305px;
  height: 36px;
  background: var(--lineColor);
  transform: rotate(180deg) perspective(1em) rotateX(6deg);
  z-index: 1;
  left: 66px;
  top: -30px;
}

细心的小伙伴可能就发现了,图一的左右不是一般高,上图却是一样高的,我只能说,你眼神真好!

我们在用伪类,盖住一部分高度去

.ship-body-out:after{
  position: absolute;
  display: block;
  content: '';
  background: var(--lineColor);
  height: 10px;
  width: 133px;
  left: 305px;
  top: 19px;
}

船名

每艘船都一个属于它自己的名字,和人名一样。比较有名的,如:定远号(亚洲第一舰)、长城号、东风号等。

下面也为咱们的船弄个名字上去

<div class="ship">
  ...
  <div class="ship-name">Web秀号</div>
</div>
.ship-name{
  position: absolute;
  z-index: 1;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 18px;
  top: 50px;
}
.ship-name:after, .ship-name:before {
  position: absolute;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  top: 10px;
  border-radius: 100%;
  --disance: 120px;
}
.ship-name:after{
  right: var(--disance);
  box-shadow: 
    -10px 0px,
    -30px 0px,
    -50px 0px;
}
.ship-name:before{
  left: var(--disance);
  box-shadow: 
    10px 0px,
    30px 0px,
    50px 0px;
}

伪类主要是用来主要是用来展示名字两旁的点(专业名词作者不知道,希望有专业的小伙伴告知一下),点的个数主要是用box-shadow实现。

box-shadow 多阴影的宽高,圆角都继承元素本身的宽高,圆角,这里也就是伪类的宽高,然后box-shadow主要控制多阴影的个数和位置,前面的值是X坐标,后面的是Y坐标,同时还可以在后面添加颜色。

船锚

<div class="ship">
  ...
  <div class="ship-anchor">
    <div class="anchor">
      <div class="anchor-left"></div>
      <div class="anchor-right"></div>
    </div>
  </div>
</div>
.ship-anchor{
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 20px;
}
.ship-anchor .anchor{
  position: absolute;
  width: 30px;
  height: 30px;
  border: 5px solid var(--lineColor);
  border-radius: 100%;
  right: 30px;
}

.ship-anchor .anchor:after{
  position: absolute;
  content: '';
  display: block;
  width: 5px;
  height: 20px;
  background: var(--lineColor);
  margin-left: -2.5px;
  left: 50%;
  top: 25px;
}

到这里还非常简单,就是普通的一个同心圆和一个矩形,组成的形状。然后添加锚的钩子

.anchor-left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid var(--lineColor);
  transform: rotate(163deg);
  left: -22px;
  top: 32px;
}
.anchor-left:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 4px solid var(--lineColor);
  border-radius: 50px 0 0 0;
  top: -18px;
  left: -26px;
  width: 34px;
  height: 15px;
  transform: rotate(45deg);
}

.anchor-right {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid var(--lineColor);
  transform: rotateX(150deg);
  left: 31px;
  top: 27px;
}
.anchor-right:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 4px solid var(--lineColor);
  border-radius: 50px 0 0 0;
  top: -18px;
  left: -26px;
  width: 34px;
  height: 15px;
  transform: rotate(45deg);
}

护栏

<div class="ship">
  ...
  <div div class="ship-head-enclosure"></div>
  <div class="ship-center-enclosure"></div>
  <div class="ship-foot-enclosure"></div>
</div>

护栏有3段,船头、船中和船尾。然后分别调试取得宽度(F12,和现有船体对齐),然后利用box-shadow一一实现护栏样式。

主要是先用个黑色背景,然后横向画出多个白色正方形块,每个块之间错位一个像素,这样就可以看到块与块之间的黑色部分了。然后top距离容器1px,上方的底色也就可以看到。下地就不用了,让容器高度刚好多出2个像素,底部底色就可以显示出来

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

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

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

(3)

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

热评文章

发表评论

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