你能举个例子展示如何使用CSS3创建动画效果吗?
时间: 2024-09-22 09:09:05 浏览: 57
CSS3 动画
当然可以。CSS3允许我们直接在样式表中添加动画,而无需JavaScript。下面是一个简单的例子,展示如何使用@keyframes规则创建一个元素淡入淡出的效果:
```css
/* 定义关键帧动画 */
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; } /* 动画进行到一半时,元素完全可见 */
100% { opacity: 0; } /* 动画结束时,元素再次变得不可见 */
}
/* 应用动画到某个元素 */
.myElement {
animation-name: fadeInOut;
animation-duration: 2s; /* 动画持续时间 */
animation-timing-function: ease-in-out; /* 缓动函数,让开始和结束更平滑 */
animation-iteration-count: infinite; /* 无限循环 */
}
```
在这个例子中,`.myElement`元素会不断地从无到有,再从有到无地淡入淡出。你可以通过调整关键帧、动画名称、持续时间和缓动函数等属性来自定义各种复杂的动画。
阅读全文