css-3

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

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

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

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

看图解构

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

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

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

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

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

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

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

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

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

(7)

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

热评文章

发表评论

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