【超详细】如何使用纯CSS完成一个可爱炫酷的动画效果-六虎

本文利用CCS相关代码，完成了小狗滑梯动画作用。并详细了讲解如何完成

作用图

第一部分

首要，先来解释CSS的变量界说部分。在这部分代码中，运用了:root挑选器来界说大局的CSS变量，它将用于控制小狗和滑梯的款式。

:root {
  --dog-color: #f9c197;
  --background-color: #e9f7f6;
  --slide-color: #fdbf88;
}

在上面的代码中，界说了三个变量：--dog-color表明小狗的色彩，--background-color表明布景色，--slide-color表明滑梯的色彩。这样，咱们能够经过修正这些变量的值，来改动小狗和滑梯的外观色彩。

接下来，持续设置body元素的款式界说。

body {
  background-color: var(--background-color);
}

代码将页面的布景色彩设置为之前界说的变量--background-color的值。这样，页面的整体布景色将与该变量的值保持一致。

然后找到.box-canvas类的款式界说部分。这部分代码将担任界说一个容器，用于包裹小狗和滑梯的元素。

.box-canvas {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto;
}

在上面的代码里，运用了类挑选器.box-canvas来选中这个容器元素。经过设置position特点为relative，使得这个容器内部的元素能够运用相对于该容器的方位进行定位。一起，设置了容器的宽度和高度为600像素，并运用margin: 0 auto;将容器水平居中显现。

来看一下.dog类的款式界说部分。这部分代码担任界说小狗元素的款式。

.dog {
  position: absolute;
  right: 50px;
  top: 100px;
  width: 120px;
  height: 150px;
  animation: dogSlide 5s infinite linear;
}

上面代码里，运用了类挑选器.dog来挑选小狗元素。经过设置position特点为absolute，使得小狗元素能够相对于其父元素进行定位。运用right和top特点来将小狗定位在容器的指定方位。然后，还界说了小狗元素的宽度和高度为120像素和150像素。最终，应用了一个名为dogSlide的动画作用，并设置其持续时刻为5秒，循环播放并且选用线性的时刻函数。

第二部分

来看一下关键帧动画dogSlide的界说部分。这个动画控制小狗元素在不同关键帧方位之间的变化。

@keyframes dogSlide {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(200px, 0) rotate(30deg);
  }
  100% {
    transform: translate(400px, 0) rotate(0);
  }
}

在上代码里，运用了@keyframes关键字来界说了一个名为dogSlide的关键帧动画。该动画包含三个关键帧：0%、50%和100%。在每个关键帧中运用transform特点来界说小狗元素的位移和旋转作用。

在动画的开端（0%关键帧）时，小狗元素的偏移量为(0, 0)，不进行旋转。在动画进行到一半（50%关键帧）时，小狗元素的偏移量变为(200px, 0)，并向顺时针方向旋转30度。最终，在动画结束时（100%关键帧），小狗元素的偏移量康复到(400px, 0)，并且不再旋转。

再看看.heart类的款式界说部分。该部分代码担任界说心形图画元素的款式。

.heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background-color: red;
  transform: translate(-50%, -50%);
  animation: heartAppear 1s infinite ease-in-out;
}

在上面代码里，运用.heart挑选器来选中心形图画元素。经过设置position特点为absolute，使心形图画元素能够相对于其父元素进行定位。接着，运用top和left特点将心形图画元素定位在其父元素的正中心。然后还界说了心形图画元素的宽度和高度为30像素，并设置布景色为赤色。

经过运用transform特点和translate函数，将心形图画元素在其父元素内部进行居中定位。应用了一个名为heartAppear的动画作用，该动画持续时刻为1秒，选用缓入缓出的时刻函数，并且无限循环播放。

第三部分

.slide类的款式界说部分，该部分代码担任界说滑梯元素的款式。

.slide {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 300px;
  background-color: var(--slide-color);
}

上面代码咱们运用.slide挑选器来选中滑梯元素。经过设置position特点为absolute，使得滑梯元素能够相对于其父元素进行定位。然后运用bottom特点将滑梯元素定位在其父元素的底部。经过left: 50%和transform: translateX(-50%)来将滑梯元素在水平方向上居中定位。

一起界说了滑梯元素的宽度和高度分别为240像素和300像素。运用变量--slide-color指定了滑梯的布景色彩，这样能够经过修正动量的值来改动滑梯的外观。

持续看看.slide::before伪元素的款式界说部分。该部分代码用于创建滑梯的左边把手。

.slide::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 20px;
  height: 60px;
  background-color: var(--slide-color);
}

上面代码里运用.slide::before挑选器来选中滑梯的伪元素。经过设置content特点为空字符串，创建了一个空的伪元素。运用position特点将伪元素相对于滑梯元素进行定位。

经过top: 50%和left: -20px将伪元素定位在滑梯元素的左边并笔直居中。然后，运用transform: translateY(-50%)将伪元素在笔直方向上进行偏移，使其保持笔直居中。

最终界说了伪元素的宽度和高度分别为20像素和60像素，并且运用变量--slide-color指定了把手的布景色彩。

全部代码

下面便是整合了咱们此次教程的全部代码：

HTML

<body>
  <div class="box-canvas">
    <div class="dog">
      <div class="heart"></div>
      <div class="body"></div>
      <div class="nose"></div>
      <div class="ear"></div>
      <div class="eye"></div>
      <div class="tail"></div>
    </div>
    <div class="slide">
      <div class="slide-end"></div>
      <div class="slide-main"></div>
      <div class="slide-start"></div>
    </div>
  </div>
</body>

CSS

:root {
  --dog-color: white;
  --dog-accent-color: #333642;
  --background-color: #25A9FC;
  --slide-color: #FEDF01;
  --ladder-color: #0185B5;
  --heart-color: #E81C23;
}
body{
  background: var(--background-color);
}
.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 600px;
  height:600px;
}
/* Convenience wrapper for easy positioning */
.dog {
  position: absolute;
  right: 170px;
  top: 70px;
  width: 58px;
  height: 75px;
  animation: dogSlide 2s infinite ease-in-out;
}
@keyframes dogSlide {
  10% {
    transform: translateX(-25px);
  }
  70% {
    transform: rotate(-20deg) translate(-185px, 50px);
  }
  90% {
     transform: translate(-205px, 125px);
  }
  100% {
     transform: translate(-205px, 125px);
  }
}
.heart {
  opacity: 0;
  position: absolute;
  background: var(--heart-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: -50px;
  left: 60%;
  transform: translateX(-60%);
  animation: heartAppear 2s infinite ease-in-out;
}
.heart::before {
  content: '';
  position: absolute;
  left: 10px;
  background: var(--heart-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.heart::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  background: var(--heart-color);
  width: 25px;
  height: 10px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@keyframes heartAppear {
  0% {
     opacity: 0;
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.body {
  position: absolute;
  left: 13px;
  width: 44px;
  height: 75px;
  border-radius: 25% 10% 20% 20%;
  background: var(--dog-color);
}
.body::before{
  content: '';
  position: absolute;
  top: 5px;
  left: -3px;
  background: var(--dog-color);
  border-radius: 20%;
  width: 20px;
  height: 30px;
  transform: rotate(45deg);
}
/* Snout section */
.body::after {
  content: '';
  position: absolute;
  background: var(--dog-color);
  width: 25px;
  height: 15px;
  top: 20px;
  left: -12px;
  border-radius: 20% 20% 50% 20%;
  border-bottom: 2px solid var(--dog-accent-color);
  animation: dogSmile 2s infinite ease-in-out;
}
@keyframes dogSmile {
  0% {
    border-radius: 20% 20% 20% 20%;
    border-bottom: none;
  }
  70% {
    border-radius: 20% 20% 50% 20%;
    border-bottom: 2px solid var(--dog-accent-color);
  }
}
.nose {
  position: absolute;
  background-color: var(--dog-accent-color);
  width: 8px;
  height: 5px;
  border-radius: 30%;
  top: 20px;
}
.ear {
  position: absolute;
  left: 35px;
  width: 20px;
  height: 30px;
  background: var(--dog-accent-color);
  border-radius: 0 0 30% 30%;
}
.eye {
  position: absolute;
  left: 22px;
  top: 10px;
  background: var(--dog-accent-color);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.tail {
  position: absolute;
  bottom: 0;
  right: -8px;
  width: 10px;
  height: 55px;
  background: var(--dog-color);
  transform: rotate(25deg);
}
.tail::before {
  content: '';
  position: absolute;
  top: -15px;
  width: 15px;
  height: 25px;
  background: var(--dog-color);
  clip-path: polygon(12% 0, 0% 100%, 100% 100%);
}
.tail::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 12px;
  height: 25px;
  background: var(--dog-color);
  clip-path: polygon(12% 0, 0% 100%, 100% 100%);
}
/* Convenience wrapper for positioning */
.slide {
  position: absolute;
  width: 270px;
  height: 200px;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
}
.slide-main {
  position: absolute;
  bottom: 64px;
  left: 53px;
  width: 200px;
  height: 50px;
  background: var(--slide-color);
  transform: rotate(-45deg);
}
.slide-end {
  position: absolute;
  height: 50px;
  width: 100px;
  background: var(--slide-color);
  bottom: 0;
  border-radius: 50% 0 0 0;
}
.slide-start {
  position: absolute;
  height: 50px;
  top: 23px;
  width: 63px;
  background: var(--slide-color);
  right: 0px;
}
/* Ladder */
.slide-start::after {
  content: '';
  position: absolute;
  height: 177px;
  width: 10px;
  background: var(--ladder-color);
  right: 0;
}

本文同步我的技术文档

【超详细】如何使用纯CSS完成一个可爱炫酷的动画效果

作用图

第一部分

第二部分

第三部分

全部代码

相关文章

40、Flutter之widgets 组件布局对齐与相对定位（Align）

JUC之强大的辅助类

并发编程 · 基础篇(下) · 三大分析法分析线程池

俞敏洪：我曾走在崩溃的边缘

作者信息