[分享]css3摇晃的桃子

大家好，今天我要分享一下如何使用CSS3来制作一个摇晃的桃子效果。

.peach {
   position: relative;
   width: 100px;
   height: 120px;
   background-image: url("peach.png");
   background-size: contain;
   animation-name: shake;
   animation-duration: 0.8s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
}

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

首先，我们需要定义一个桃子的容器，即“.peach”类。在容器中，设置背景图片为“peach.png”，并将动画效果命名为“shake”。

接着，我们需要在CSS文件中定义“shake”动画。使用@keyframes关键字来定义动画，设置从0%到50%，桃子向右旋转5度；从50%到100%，桃子向左旋转5度。设置动画持续时间为0.8秒，动画函数为“ease-in-out”，循环次数为无限。

最后，将“shake”动画应用到“.peach”类中。

以上就是如何使用CSS3来制作一个摇晃的桃子效果的具体步骤，大家可以根据自己的需求进行调整和修改，欢迎大家试一试！