写一个css 动画 金蛋放大缩小左右摆头
时间: 2023-08-24 20:09:48 浏览: 222
CSS+jQuery实现的一个放大缩小动画效果
可以尝试以下代码:
```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`类上即可。
阅读全文