写一个css 动画 金蛋放大缩小左右摆头

可以尝试以下代码：

.golden-egg {
  width: 50px;
  height: 70px;
  background-color: gold;
  border-radius: 50%;
  position: relative;
  animation: egg-animation 2s ease-in-out infinite;
}

@keyframes egg-animation {
  0% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(-10px) scale(1.1);
  }
  50% {
    transform: translateX(0) scale(1.2);
  }
  75% {
    transform: translateX(10px) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

这里我们使用了CSS3的动画属性`animation`，并定义了一个名为`egg-animation`的关键帧动画。在动画中，我们通过`transform`属性来使金蛋在X轴上左右摆动，并通过`scale`属性来实现放大缩小的效果。最后把这个动画应用在`.golden-egg`类上即可。

相关问题

写一个css 动画 金蛋放大缩小左右摇摆

可以使用CSS3的动画来实现这个效果。下面是一个简单的实现：

<div class="egg"></div>

.egg {
  position: relative;
  width: 50px;
  height: 70px;
  background-color: #f7d794;
  border-radius: 50% 50% 0 0;
  animation: shake 2s ease-in-out infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(-10px) scale(1.2);
  }
  50% {
    transform: translateX(0) scale(1);
  }
  75% {
    transform: translateX(10px) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

解释一下这个代码：

首先，我们创建了一个div元素，并给它添加一个类名“egg”。

然后，我们给这个类添加了一些样式。我们使用了相对定位，以便我们可以在其中放置其他元素（例如金蛋）。我们还设置了元素的宽度、高度、背景颜色和边框半径，以使其看起来像一个金蛋。

最重要的是动画。我们使用了CSS3的动画功能，定义了一个名为“shake”的动画。这个动画将在2秒内无限循环播放，使用了“ease-in-out”缓动函数，这意味着动画将以慢速开始、快速结束，并在中间放慢速度，以产生更自然的效果。

动画定义了5个关键帧，每个关键帧都定义了元素的变换（transform）。在第一帧中，元素将不做任何变换（即不缩放、不移动）。在第二个关键帧中，元素将向左移动10像素，并缩放1.2倍。在第三个关键帧中，元素将回到原来的位置和大小。接着，在第四个关键帧中，元素将向右移动10像素，并再次缩放1.2倍。最后，在第五个关键帧中，元素将回到原来的位置和大小。

这些关键帧的变换产生了一个看起来像是金蛋在左右摇晃的效果。

写一个css 动画 金蛋晃动

可以使用CSS的`@keyframes`和`transform`属性来实现金蛋的晃动动画，代码如下：

@keyframes shake {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}

.golden-egg {
  animation: shake 1s ease-in-out infinite;
}

首先定义了一个名为`shake`的动画，其中通过旋转`transform: rotate()`来实现晃动效果。然后给目标元素添加了`.golden-egg`类，并设置了`animation`属性，表示在1秒内以`ease-in-out`的速度循环播放`shake`动画。

需要注意的是，上述代码只是展示了动画实现的思路，具体的样式和html结构还需要根据实际情况进行调整。