写一个css 动画 金蛋晃动
时间: 2023-08-24 17:09:54 浏览: 240
CSS3加载动画网站Loading特效
可以使用CSS的`@keyframes`和`transform`属性来实现金蛋的晃动动画,代码如下:
```css
@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结构还需要根据实际情况进行调整。
阅读全文