前端css中keyframes(关键帧)的简单使用
/* 定义一个名为fadeInOut的关键帧 */
@keyframes fadeInOut {
0%, 100% { opacity: 0; } /* 开始和结束状态 */
50% { opacity: 1; } /* 中间状态 */
}
/* 应用关键帧到一个元素 */
.element {
animation: fadeInOut 2s infinite; /* 无限循环 */
}这段代码定义了一个名为fadeInOut的关键帧，它使元素从透明度0渐变到1，再从透明度1渐变回0。然后，.element类使用这个关键帧制定了一个动画效果，该动画每次持续2秒，并且是无限循环的。
评论已关闭