css3写一个动画效果
时间: 2023-04-10 12:02:25 浏览: 150
css3动画效果
可以使用CSS3的@keyframes规则来创建动画效果,例如:
```css
/* 定义动画 */
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* 应用动画 */
.myElement {
animation-name: myAnimation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
```
这段代码定义了一个名为`myAnimation`的动画,它会让元素在50%的时候放大到1.2倍,然后再缩小回原来的大小。然后将这个动画应用到一个类名为`myElement`的元素上,让它无限循环播放,来实现动画效果。
阅读全文