/* 示例代码:使用CSS3实现一个简单的动画效果 */
/* 定义关键帧动画 */
@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; }
}
/* 应用动画到元素 */
#animatedElement {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
example
的关键帧动画,设置了从红色背景到黄色、蓝色、绿色再回到红色的渐变过程,并且元素的位置也在不断变化。如果你需要其他特定的 CSS3 示例,请告诉我!
上一篇:css选择器
下一篇:css animation
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站