CSS简笔画logo系列：纯CSS绘制“Adidas” Logo

Javanx

发布于 2020-08-19 15:43:08

2.4K0

发布于 2020-08-19 15:43:08

文章被收录于专栏：web秀

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

1、CSS Flex垂直居中对齐

2、CSS clip 剪裁

3、CSS box-shadow 多阴影

看图解构

看图很简单咯，Adidas Logo就是用3个“梭形”组成，然后添加3条和底色一样颜色的线覆盖在上面即可。

什么是“梭形”？

船大家都见过吧，它就是“梭形”形状的，类似于“菱形”，但是“梭形”两头都是圆圆的，不是尖尖的角。生活中，还有很多花瓣也都是“梭形”的。

logo底图

<div id="adidas">
  <div class="logo">
  </div>
</div>

body {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  --bgColor: #017ac3;
}
#adidas {
  position: relative;
  height: 325px;
  overflow: hidden;
  width: 325px;
  border-radius: 50%;
  background: var(--bgColor);
}

flex布局如何水平垂直居中？

要用水平垂直居中元素的父元素添加下面样式，且它本身要有高度和宽度（被子元素撑大也可以），该父元素下面只能有它一个子元素。

display: flex;
justify-content: center;
align-items: center;

CSS “梭形”

<div id="adidas">
  <div class="logo">
    <div class="leaf1">
      <div class="leaf-t1"></div>
      <div class="leaf-t2"></div>
    </div>
  </div>
</div>

#adidas * {
  position: absolute;
}
#adidas .leaf1 {
  top: 50px;
  left: 111px;
}

#adidas .leaf-t1{
  background: #fff;
  border-radius: 204px/280px;
  clip: rect(18px 43px 255px 0px);
  height: 280px;
  top: -68px;
  width: 194px;
}

#adidas .leaf1 .leaf-t1{
  height: 250px;
}

我们用CSS实现“梭形”就好复杂一点，用clip裁剪两个扇形，拼接而成一个“梭形”。上图就是clip裁剪后的图形，然后画出另外一个

css clip属性： clip 属性剪裁绝对定位元素，clip 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

#adidas .leaf-t2 {
  background: #fff;
  border-radius: 204px/280px;
  clip: rect(18px 43px 255px 0px);
  height: 280px;
  top: -68px;
  width: 194px;
}
#adidas .leaf1 .leaf-t2 {
  height: 250px;
}
/**
  上面两个没有区别，主要是下面这段样式
  调整位置并旋转180°
*/
#adidas .leaf-t2 {
  left: -109px;
  transform: rotate(180deg);
}

依次，其他两个“梭形”也就出来了

<div id="adidas">
  <div class="logo">
    <div class="leaf1">
      <div class="leaf-t1"></div>
      <div class="leaf-t2"></div>
    </div>
    <div class="leaf2">
      <div class="leaf-t1"></div>
      <div class="leaf-t2"></div>
    </div>
    <div class="leaf3">
      <div class="leaf-t1"></div>
      <div class="leaf-t2"></div>
    </div>
  </div>
</div>

#adidas .leaf-t1,
#adidas .leaf-t2 {
  ...
  /* 所有扇形除了裁剪，高度外其他样式都一样 */
}

#adidas .leaf-t2 {
  left: -109px;
  transform: rotate(180deg);
}

#adidas .leaf1 .leaf-t1,
#adidas .leaf1 .leaf-t2 {
  height: 250px;
}

#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2,
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
  clip: rect(20px 38px 220px 0px);
  height: 240px;
}
#adidas .leaf2 {
  left: 0px;
  top: 123px;
  transform: rotate(-40deg);
}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2 {
  border-radius: 200px/287px;
  width: 200px;
}
#adidas .leaf2 .leaf-t1 {
  left: 5px;
}
#adidas .leaf2 .leaf-t2 {
  left: -120px;
}
#adidas .leaf3 {
  left: 241px;
  top: 69px;
  transform: rotate(40deg);
}
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
  border-radius: 200px/287px;
  width: 200px;
}
#adidas .leaf3 .leaf-t1 {
  left: 4px;
}
#adidas .leaf3 .leaf-t2 {
  left: -121px;
}

CSS box-shadow

CSS box-shadow 多阴影，前面很多文章都有提到过，大家先看看用法：

box-shadow: h-shadow v-shadow blur spread color inset;

属性值描述 h-shadow 指阴影水平偏移量，其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边

v-shadow 指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部

blur 阴影模糊半径，此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊

spread 阴影扩展半径，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小

color 阴影颜色，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

inset 阴影类型，默认的投影方式是外阴影；inset就是将外阴影变成内阴影

注意：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。

大家看图，应该就能明白box-shadow多层阴影遵循的规律了。

回到我们正题上

<div id="adidas">
  <div class="logo">
    ...
    <div class="stripes"></div>
  </div>
</div>

#adidas .stripes {
  box-shadow: 
    0 24px 0 0 var(--bgColor), 
    0 48px 0 0 var(--bgColor);
  height: 12px;
  left: 0;
  top: 128px;
  width: 100%;
  z-index: 10;
}