CSS动画是一种强大的技术,可以让网页元素在视觉上更加生动和有趣。以下是一些关于CSS动画的基础知识和示例。
基础概念
CSS动画通过改变元素的样式来创建动画效果。这可以通过使用@keyframes
规则来实现。
示例
假设我们想要创建一个简单的淡入淡出效果,可以使用以下代码:
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.element {
animation: fadeInOut 2s infinite;
}
扩展阅读
想要了解更多关于CSS动画的知识,可以阅读本站的CSS动画教程。
图片示例
CSS动画示例