代码
提交代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animate</title> <style> /* 清除浏览器默认边距 */ * { padding: 0; margin: 0; } /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ body { height: 100vh; display: flex; align-items: center; justify-content: center; } /* 先定义动画,动画名叫:change-color */ @keyframes change-color { from /* 0% */ { color: red } /* 红 */ 13% { color: orange } /* 橙 */ 26% { color: yellow } /* 黄 */ 39% { color: green } /* 绿 */ 52% { color: cyan } /* 青 */ 65% { color: blue } /* 蓝 */ 78% { color: purple } /* 紫 */ to /* 100% */ { color: red } /* 最后一帧和第一帧的样式一致 */ } .animate { width: 400px; height: 100px; /* 再使用预先定义好的动画 */ animation: change-color 6s infinite; /* 动画:动画名(change-color) 时长(6秒) 动画次数(无限) */ } </style> </head> <body> <div class="animate"> <!-- 动画:动画名(change-color) 时长(6秒) 动画次数(无限) --> animation: change-color 6s infinite; </div> </body> </html>
运行结果