[分享]css3摇晃的桃子代码

CSS3摇晃动画是一种非常有趣而又实用的效果。当我们需要在网页中展示某些特殊信息时，可以通过CSS3摇晃动画来吸引用户的目光。下面是一个使用CSS3动画来制作摇晃桃子效果的代码。.peach { an...

CSS3摇晃动画是一种非常有趣而又实用的效果。当我们需要在网页中展示某些特殊信息时，可以通过CSS3摇晃动画来吸引用户的目光。下面是一个使用CSS3动画来制作摇晃桃子效果的代码。

.peach {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

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

首先，我们定义一个类名为“peach”，以后我们需要使用摇晃桃子效果时，只需要添加这个类名即可。接下来通过“animation-name”属性来指定动画名称为“shake”，这是我们在下面定义的。然后设置“animation-duration”属性为0.5秒，这是摇晃一次的时间。接着通过“animation-timing-function”来设置动画过渡的速度曲线。在这里，我们使用的是“ease-in-out”，具有缓动效果，使动画更加自然。最后，通过设置“animation-iteration-count”为“infinite”来让动画无限持续。

接下来就是关键的动画效果部分。我们通过“@keyframes”来定义动画中每个阶段的动作。在这里，我们分别设置了0%、25%、50%、75%、100%五个阶段，代表了动画运行不同时的状态。在0%和100%的时候，桃子不做任何动作，保持原始状态。当桃子运行到25%的时候，通过“transform”属性来设置桃子旋转30度。接着到50%的时候，桃子回到原始状态。以此类推，当桃子到达75%时，旋转-30度，最后回到原始状态。通过这样的设置，我们就完成了一个完整的摇晃动画效果。