/* CSS Animation 示例 */
/* 定义一个关键帧动画 */
@keyframes example {
0% { background-color: red; left: 0px; top: 0px; }
25% { background-color: yellow; left: 200px; top: 0px; }
50% { background-color: blue; left: 200px; top: 200px; }
75% { background-color: green; left: 0px; top: 200px; }
100% { background-color: red; left: 0px; top: 0px; }
}
/* 应用动画到元素 */
#animate {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
example
的关键帧动画。动画分为五个阶段,每个阶段设置了不同的背景颜色和位置。animate
的元素,并应用了之前定义的 example
动画。动画持续时间为 4 秒,并且无限循环 (animation-iteration-count: infinite
)。通过这段代码,你可以看到一个方块在页面上按照指定的路径移动并改变颜色。
上一篇:css3
下一篇:postcss
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站