CSS简笔画：纯CSS绘制一顶帽子

Javanx

发布于 2020-07-16 15:33:06

7680

发布于 2020-07-16 15:33:06

文章被收录于专栏：web秀

夏天，人人都希望有一顶漂亮的帽子吧？来，我送给你。

看图解构

帽子结构很简单，分为帽檐、帽冠、饰带、饰带上面有花朵

html帽子结构

<div class="cap">
  <!-- 帽冠 -->
  <div class="top">
    <!-- 饰带 -->
    <div class="lace">
      <!-- 花朵 -->
      <div class="flower">
        <!-- 花瓣 -->
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
    </div>
  </div>
  <!-- 帽檐 -->
  <div class="bottom"></div>
</div>

CSS部分代码

1、帽檐、帽冠

.cap {
  position: relative;
}
.top{
  position: absolute;
  width: 120px;
  height: 116px;
  background: var(--capColor);
  border-radius: 100%;
  transform: rotateX(13deg) rotateY(15deg) rotateZ(14deg);
  top: -32px;
  left: 60px;
  z-index: 2;
}
.bottom{
  position: absolute;
  width: 210px;
  height: 110px;
  background: var(--capColor);
  border-radius: 100%;
  transform: rotateX(36deg) rotateY(15deg);
  z-index: 1;
}

利用transform: rotate，使其沿着 X/Y/Z 轴进行 3D 旋转，从而形成帽子的大致形状。

2、添加"饰带"

.lace{
  position: absolute;
  bottom: 27px;
  left: -24px;
  width: 170px;
  height: 120px;
  border: 14px solid var(--laceColor);
  border-radius: 50%;
}

利用border、border-radius加父元素的overflow: hidden，隐藏掉超出部分，形成"饰带"

3、"饰带花朵"

.petal{
  position: absolute;
  background: var(--laceColor);
  border-radius: 100%;
  border: 1px solid var(--capColor);
  width: 20px;
  height: 20px;
  z-index: 9;
}
.petal:first-child{
  position: absolute;
  top: -10px;
}
.petal:nth-child(2){
  position: absolute;
  top: -3px;
  left: 10px;
}
.petal:nth-child(3){
  position: absolute;
  top: 8px;
  left: 10px;
}
.petal:nth-child(4){
  position: absolute;
  top: 10px;
  left: -5px;
}
.petal:last-child{
  position: absolute;
  top: 0px;
  left: -10px;
}

这个没有技术可言，利用绝对定位，布局好每个花瓣的位置就可以了。

CSS变量说明

1、CSS变量如何声明呢？

正如你所见，上面用到的方法。变量名前面要加两根连词线（--），即可声明CSS变量。

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

2、如何使用CSS变量

var()函数用于读取变量，如下：

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

3、CSS变量作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。

上面代码中，三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

这就是说，变量的作用域就是它所在的选择器的有效范围。

这样大家会用CSS变量后，咱们就可以给帽子换颜色了。

接下来就看你的审美了，随意配色，各凭所好咯。

结语

本次课程就到此结束啦，关注我，学习更多前端知识，但不止于前端哦！

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

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

css

编程算法

网站

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

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

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

css

编程算法

网站

登录后参与评论

0 条评论

热度