CSS3基础之动画,web前端框架开发实例
/* 定义一个简单的动画 */
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
/* 使用动画 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; /* 指定使用的动画名称 */
animation-duration: 4s; /* 动画时长 */
animation-iteration-count: infinite; /* 动画无限次数播放 */
}
这段代码定义了一个名为example
的关键帧动画,该动画从红色过渡到黄色,并且通过animation-duration
属性设置动画时长为4秒。然后,在div
元素上应用了这个动画,并通过animation-iteration-count
属性设置动画无限循环播放。这是一个简单的动画示例,展示了如何在Web前端开发中使用CSS3动画。
评论已关闭