CSS动画的摇摆舞

一、埃及猫咪摇摆舞动画

CSS动画能够让我们在网页中制作出丰富多彩的动画效果。而埃及猫咪摇摆舞动画是非常经典的一种动画效果。这种动画效果简单易学，适用于各种网页中的元素，比如图标、按钮等。

要制作一个埃及猫咪摇摆舞动画，需要用到CSS的transform和animation属性。transform属性可以改变元素的旋转、缩放、平移等属性，而animation属性则可以制作出复杂的动画效果。

/* 埃及猫咪摇摆舞动画 */

.cat {
  position: relative;
  width: 60px;
  height: 60px;
  background-image: url("cat.png");
  background-size: 60px 60px;
  animation: catSwing 1s ease-in-out infinite;
}

@keyframes catSwing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

上面的代码中，我们定义了一个class为"cat"的元素，将其设置成相对定位，设置宽度和高度为60px，并且设置了背景图片为cat.png。然后使用animation属性，将动画效果命名为catSwing，并且设置动画时长为1s，缓动函数为ease-in-out，循环播放。

在keyframes中，我们用了三个百分比来描述这个动画效果。0%表示动画刚开始，元素还没有发生任何变化，此时元素旋转角度为0deg；50%表示动画过程中的中间点，元素旋转角度为20deg；100%表示动画结束时，元素旋转角度再次回归0deg。

二、动画效果调整

如果希望埃及猫咪摇摆舞动画的效果更加真实，可以采用以下方法进行调整。

首先，为了使摇摆效果更加自然，可以将旋转中心点设置在元素的下方中央，这样就能够保证元素的摇摆效果更加生动，在元素的平移位置上，可以通过调整元素的top和left属性来达到想要的位置。

其次，可以通过animation-delay属性来让多个元素的动画效果错开，使整个效果看起来更加酷炫。

/* 优化后的动画效果 */

.cat {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  left: 0;
  background-image: url("cat.png");
  background-size: 60px 60px;
  transform-origin: bottom center;
  animation: catSwing 1s ease-in-out infinite;
}

.cat:nth-child(2){
  left: 80px;
  animation-delay: 0.2s;
}

.cat:nth-child(3){
  left: 160px;
  animation-delay: 0.4s;
}

@keyframes catSwing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

上面的代码中，我们将position从relative改为了absolute，可以根据自己的需求进行调整。同时，我们添加了一个transform-origin属性，设置值为bottom center，表示垂直中心点位置在元素底部。这样，摇摆舞效果看起来更加自然。

我们还添加了三个.class为"cat"的元素，并通过nth-child选择器对每个元素进行了定位和animation-delay属性设置，从而实现了多个元素错开播放的效果，大大提升了整个动画效果的酷炫程度。

三、小技巧

除了上面提到的CSS属性以外，还有一些小技巧可以让我们的动画效果更加出彩。

首先，可以使用transition属性，让元素在交互时有更加流畅的过渡效果。而且，在设置transition属性时，我们可以通过all关键字来设置所有属性，这样可以实现所有属性都具有过渡效果。

/* 添加过渡效果 */

.cat {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  left: 0;
  background-image: url("cat.png");
  background-size: 60px 60px;
  transform-origin: bottom center;
  animation: catSwing 1s ease-in-out infinite;
  transition: all 0.3s ease-in-out;
}

.cat:hover {
  transform: scale(1.2);
}

以上代码中，我们新增了一个hover伪类选择器，并为其设置了一个transform属性，使元素在鼠标悬浮时有一个缩放效果。我们在.cat中还添加了transition属性，并设置all关键字，让所有属性都具有过渡效果。同时，设置0.3s的过渡时间，并设置了缓动函数ease-in-out，从而让过渡更加平滑自然。

其次，我们还可以设置box-shadow属性，为元素添加一层阴影，并通过动画效果使其看起来更加有立体感。同时，我们还可以通过动态改变元素的透明度，达到淡入淡出的效果。

/* 添加阴影效果和淡入淡出效果 */

.cat {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  left: 0;
  background-image: url("cat.png");
  background-size: 60px 60px;
  transform-origin: bottom center;
  animation: catSwing 1s ease-in-out infinite;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
}

.cat:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  opacity: 1;
}

以上代码中，我们新增了一个box-shadow属性，为元素添加了一层阴影效果。同时，我们还将元素的透明度设置为0.8，并在hover时将透明度设置为1，产生一种淡入淡出的效果。我们还添加了一个长度为20px，透明度为0.6的阴影效果，让鼠标悬浮时的元素更加醒目。