css-3

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

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

CSS简笔画logo系列:纯CSS绘制Adidas Logo

本节你能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);
}

CSS简笔画logo系列:纯CSS绘制Adidas Logo

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简笔画logo系列:纯CSS绘制Adidas Logo

我们用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);
}

CSS简笔画logo系列:纯CSS绘制Adidas Logo

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

<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简笔画logo系列:纯CSS绘制Adidas Logo

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多层阴影遵循的规律了。

CSS简笔画logo系列:纯CSS绘制Adidas Logo

回到我们正题上

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

CSS简笔画logo系列:纯CSS绘制Adidas Logo

元素本身是一道横线,然后多阴影添加2个,这样就是3道横线了。

结语

本节内容就到此结束了,大家应该或多或少都有些收获吧,关注我,学习更多前端知识,但不止于前端哦!

小伙伴们,有问题可以评论区留言哦,欢迎大家点评。

谢谢大家一直以来的支持!

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

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

(4)

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

热评文章

发表评论

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