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

Javanx

发布于 2020-07-03 10:24:10

5630

发布于 2020-07-03 10:24:10

文章被收录于专栏：web秀

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

可爱的你值得拥有！

上图是用什么软件制作的呢？用纯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;
}