Question

我创建了一个脚本来创建一个300px x 300px的彩虹框。当我尝试运行它时没有显示任何内容。我究竟做错了什么？我已经针对如何执行此代码的教程运行了此代码，但没有发现任何内容。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
width: 300px;
height:300px;
position: relative;
-webkit-animation: myfirst;
animation: myfirst;
}

@-webkit-keyframes myfirst {
  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;}
}

@keyframes myfirst {
 14%    {background-color: red;}
 28%    {background-color: orange;}
 42%    {background-color: yellow;}
 56%    {background-color: green;}
 70%    {background-color: blue;}
 84%    {background-color: #4b0082;}
 100%   {background-color: #EE82EE;}
</style>
</head>
<body>

<div></div>

</body>
</html>

Answer 1

您缺少关键帧动画的右括号

编辑：您还需要添加动画的持续时间，如下所示： animation: 3s myfirst

HTML动画

1 个答案: