<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect { /*选取某个盒子给它增加动画*/
animation-name: rainbow; /*animation-name的值 放在keyframes 后面*/
animation-duration: 4s;
}
@keyframes rainbow { /*keyframes里面放不同阶段的css变化 0% 到 100% 间的任意百分比都可以设置*/
0% {
background-color: blue;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}
</style>
<div id="rect"></div>
相关文章
- 01-27gluon android启动画面
- 01-27奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?
- 01-272d旋转(css3实现过度效果和动画效果)
- 01-272021年将新推188部动画,爱优腾加上B站你选谁?
- 01-27css3动画风景图
- 01-27ccc 播放动画
- 01-27MaterialDesign动画
- 01-27缓动动画-手风琴/
- 01-27再谈CAAnimation动画
- 01-27css动画