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

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」

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

可爱的你值得拥有！

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

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

如耳朵

.dog__ear-l, .dog__ear-r {
  ...
  border-top-left-radius: 0vmax;
  border-top-right-radius: 0vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
}

依次类推，头，身体也可以用border-radius

/* 狗狗头圆角 */
.dog__head {
  ...
  border-top-left-radius: 4.05vmax;
  border-top-right-radius: 4.05vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
}
/* 狗狗身体圆角 */
.dog__body {
  ...
  border-top-left-radius: 3vmax;
  border-top-right-radius: 6vmax;
  border-bottom-right-radius: 1.5vmax;
  border-bottom-left-radius: 6vmax;
}

是不是已经有初步的形状呢？

狗狗眼睛，鼻子和嘴巴

/* 狗狗鼻子 */
.dog__snout {
  position: absolute;
  left: -1.5vmax;
  bottom: 0;
  width: 7.5vmax;
  height: 3.75vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #D7DBD2;
}
/* 狗狗鼻子上方黑圆圈 */
.dog__snout::before {
  content: '';
  position: absolute;
  left: -0.1125vmax;
  top: -0.15vmax;
  width: 1.875vmax;
  height: 1.125vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #1C3130;
}
/* 狗狗鼻梁（眼睛中间的部分） */
.dog__nose {
  position: absolute;
  top: -1.95vmax;
  left: 40%;
  width: 0.75vmax;
  height: 2.4vmax;
  border-radius: 0.525vmax;
  transform-origin: bottom;
  transform: rotateZ(10deg);
  background-color: #D7DBD2;
}

/* 狗狗左右眼睛 */
.dog__eye-l, .dog__eye-r {
  position: absolute;
  top: -0.9vmax;
  width: 0.675vmax;
  height: 0.375vmax;
  border-radius: 50%;
  background-color: #1C3130;
}

.dog__eye-l {
  left: 27%;
}

.dog__eye-r {
  left: 65%;
}

可爱的狗狗就要诞生了，激不激动？兴不兴奋？

狗狗四只和尾巴

/* 狗狗尾巴 */
.dog__tail {
  position: absolute;
  right: -3vmax;
  height: 1.5vmax;
  width: 4.5vmax;
  background-color: #E96839;
  border-radius: 1.5vmax;
}

.leg {
  position: absolute;
  bottom: 0;
  width: 3vmax;
  height: 4.125vmax;
}

/* 狗狗脚趾部分 
  容器固定高度，伪类是个圆，超出容器的隐藏
  即可形成半圆
*/
.paw {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3.75vmax;
  height: 1.875vmax;
  overflow: hidden;
}
.paw::before {
  content: '';
  position: absolute;
  width: 3.75vmax;
  height: 3.75vmax;
  border-radius: 50%;
}

/* 狗狗腿 
  linear-gradient线性渐变，使狗狗腿上粗下细
*/
.top {
  position: absolute;
  bottom: 0;
  left: 0.75vmax;
  height: 4.5vmax;
  width: 2.625vmax;
  border-top-left-radius: 1.425vmax;
  border-top-right-radius: 1.425vmax;
  transform-origin: bottom right;
  transform: rotateZ(90deg) translateX(-0.1vmax) translateY(1.5vmax);
  z-index: -1;
  background-image: linear-gradient(70deg, transparent 20%, #ff8b56 20%);
}

.dog__paws {
  position: absolute;
  bottom: 0;
  left: 7.5vmax;
  width: 12vmax;
  height: 3vmax;
}

.dog__bl-leg {
  left: -3vmax;
  z-index: -10;
}

.dog__bl-paw::before {
  background-color: #bec4b6;
}

.dog__bl-top {
  background-image: linear-gradient(80deg, transparent 20%, #E96839 20%);
}

.dog__fl-leg {
  z-index: 10;
}

.dog__fl-leg {
  left: 0;
}

.dog__fl-paw::before {
  background-color: #D7DBD2;
}

.dog__fr-leg {
  right: 0;
}

.dog__fr-paw::before {
  background-color: #D7DBD2;
}

缺点生机，让狗狗动起来吧

赋予狗狗生命

身体和头，上下起伏动画效果

.dog__head {
  ...
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__head-c {
  ...
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__body {
  ...
  animation: body 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
@keyframes head {
  0%, 10%, 20%, 26%, 28%, 90%, 100% {
    height: 8.25vmax;
    bottom: 0;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  5%, 15%, 22%, 24%, 30% {
    height: 8.1vmax;
  }
  32%, 50% {
    height: 8.25vmax;
  }
  55%, 60% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  /* 狗狗头部上扬 */
  70%, 80% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(10deg);
  }
}
@keyframes body {
  0%, 10%, 20%, 26%, 28%, 32%, 100% {
    height: 7.2vmax;
  }
  5%, 15%, 22%, 24%, 30% {
    height: 7.05vmax;
  }
}

狗狗耳朵翘起来动画

.dog__ear-l {
  ...
  animation: ear-l 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__ear-r {
  ...
  animation: ear-r 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
@keyframes ear-l {
  0%, 10%, 20%, 26%, 28%, 82%, 100% {
    transform: rotateZ(-50deg);
  }
  5%, 15%, 22%, 24% {
    transform: rotateZ(-48deg);
  }
  30%, 31% {
    transform: rotateZ(-30deg);
  }
  32%, 80% {
    transform: rotateZ(-60deg);
  }
}
@keyframes ear-r {
  0%, 10%, 20%, 26%, 28% {
    transform: rotateZ(20deg);
  }
  5%, 15%, 22%, 24% {
    transform: rotateZ(18deg);
  }
  30%, 31% {
    transform: rotateZ(10deg);
  }
  32% {
    transform: rotateZ(25deg);
  }
}

然后添加鼻子和眼睛动画效果

.dog__snout {
  ...
  animation: snout 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__snout::before {
  ...
  animation: snout-b 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
.dog__eye-l, .dog__eye-r {
  ...
  animation: eye 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

@keyframes snout {
  0%, 10%, 20%, 26%, 28%, 82%, 100% {
    height: 3.75vmax;
  }
  5%, 15%, 22%, 24% {
    height: 3.45vmax;
  }
}
@keyframes snout-b {
  0%, 10%, 20%, 26%, 28%, 98%, 100% {
    width: 1.875vmax;
  }
  5%, 15%, 22%, 24% {
    width: 1.8vmax;
  }
  34%, 98% {
    width: 1.275vmax;
  }
}
@keyframes eye {
  0%, 30% {
    width: 0.675vmax;
    height: 0.3vmax;
  }
  32%, 59%, 90%, 100% {
    width: 0.525vmax;
    height: 0.525vmax;
    transform: translateY(0);
  }
  60%, 75% {
    transform: translateY(-0.3vmax);
  }
  80%, 85% {
    transform: translateY(0.15vmax);
  }
}

添加阴影

.dog::before {
  content: '';
  position: absolute;
  bottom: -0.75vmax;
  right: -0.15vmax;
  width: 100%;
  height: 1.5vmax;
  background-color: rgba(28, 49, 48, 0.1);
  border-radius: 50%;
  z-index: -1000;
  animation: shadow 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
@keyframes shadow {
  0%, 10%, 20%, 26%, 28%, 30%, 84%, 100% {
    width: 99%;
  }
  5%, 15%, 22%, 24% {
    width: 101%;
  }
  34%, 81% {
    width: 96%;
  }
}

狗狗睡觉身体起伏时，阴影放大缩小，用绝对定位，固定右边距离，放大缩小时，就只能看到左边变化了。

结语

大家学到了什么？

1、分解问题，复杂问题简单化

2、CSS3 flex 垂直居中

display: flex;
justify-content: center;
align-items: center;

3、CSS3 border-radius圆角，每个半径的四个值的顺序是：左上角，右上角，右下角，左下角

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角

4、CSS3 transform， 元素进行2D/3D转换（平移、缩放、旋转）

transform: translate(x,y)/translateX(x)/translateY(y)  X/Y 轴平移
transform: rotateX/rotateY/rotateZ 3D旋转

4、CSS3 animation，元素动画

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

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

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