css-3

CSS3萌宠系列,纯CSS3诞生的可爱狗狗

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

CSS3萌宠系列,纯CSS3诞生的可爱狗狗

好可爱一只小狗狗!睡觉憨憨的样子,听到细微的声音,立马竖起他的耳朵,看向远方。你是不是想拥有这样一只忠实而又可爱的狗狗呢?

可爱的你值得拥有!

上图是用什么软件制作的呢?用纯CSS+HTML你信吗?

不信的,让我们拭目以待吧!

看图解构

看上图,狗狗有圆圆头,2只小小的眼睛和2只长长的耳朵,鼻子,嘴巴,4只脚,身体、尾巴组成。

细节:
1、地上有阴影,狗狗抬头时阴影会缩小

2、狗狗是趴着在,所有只能看到3只脚

3、狗狗睡觉时,呼吸会让身体上下起伏

4、狗狗抬头时,耳朵会上扬

有了结构思路,我们可以先来画出大致的样子

狗狗身体结构

<div class="main">
  <div class="dog">
    <!-- 头 -->
    <div class="dog__head">
      <!-- 嘴巴部分 -->
      <div class="dog__snout">
        <!-- 鼻梁 -->
        <div class="dog__nose"></div>
        <!-- 眼睛 -->
        <div class="dog__eyes">
          <div class="dog__eye-l"></div>
          <div class="dog__eye-r"></div>
        </div>
      </div>
    </div>
    <!-- 耳朵 -->
    <div class="dog__head-c">
      <div class="dog__ear-l"></div>
      <div class="dog__ear-r"></div>
    </div>
    <!-- 身体 -->
    <div class="dog__body">
      <!-- 尾巴 -->
      <div class="dog__tail"></div>
    </div>
    <!-- 三只角 -->
    <div class="dog__paws">
      <div class="dog__bl-leg leg">
        <div class="dog__bl-paw paw"></div>
        <div class="dog__bl-top top"></div>
      </div>
      <div class="dog__fl-leg leg">
        <div class="dog__fl-paw paw"></div>
        <div class="dog__fl-top top"></div>
      </div>
      <div class="dog__fr-leg leg">
        <div class="dog__fr-paw paw"></div>
        <div class="dog__fr-top top"></div>
      </div>
    </div>
  </div>
</div>

这里就是狗狗身体结构(html部分)。下面用CSS修饰,使狗狗各部位正常。

CSS修饰狗狗部分身体结构

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FDFBFD;
}

.main {
  position: relative;
  width: 37.5vmax;
  height: 37.5vmax;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dog {
  position: relative;
  width: 22.5vmax;
  height: 8.25vmax;
}

.dog__head {
  position: absolute;
  left: 1.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
  background-color: #FF8147;
}

.dog__head-c {
  position: absolute;
  left: 1.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
  z-index: -1;
}
.dog__eye-l {
  left: 27%;
}

.dog__eye-r {
  left: 65%;
}

.dog__ear-l, .dog__ear-r {
  position: absolute;
  width: 10.5vmax;
  height: 3.375vmax;
  background-color: #E26538;
}

.dog__ear-l {
  top: 1.5vmax;
  left: 6vmax;
  transform-origin: bottom left;
  transform: rotateZ(-50deg);
  z-index: -1;
}

.dog__ear-r {
  top: 1.5vmax;
  right: 3vmax;
  transform-origin: bottom right;
  transform: rotateZ(20deg);
  z-index: -2;
}

.dog__body {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  bottom: 0.3vmax;
  left: 3.75vmax;
  width: 18.75vmax;
  height: 7.2vmax;
  background-color: #ff702e;
  z-index: -2;
}

CSS3萌宠系列,纯CSS3诞生的可爱狗狗

然后我们通过border-radius圆角,改变元素的形成。使其更接近真实的狗狗身体结构形状。

如耳朵

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

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

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

(26)

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

热评文章

发表评论

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