|
菜单
×
×
正确！
练习将以下 5 个步骤添加到动画“example”（使用 0%、25%、50%、75% 和 100%）
<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {@(17);} 25% {@(19);} 50% {@(21);} 75% {@(19);} 100% {@(17);} } </style> <body> <div>这是一个 div</div> </body>
<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {left:0px; top:0px;} 25% {left:0px; top:200px;} 50% {left:200px; top:200px;} 75% {left:200px; top:0px;} 100% {left:0px; top:0px;} } </style> <body> <div>这是一个 div</div> </body>
<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {left:0px;top:0px;} 25% {left:0px;top:200px;} 50% {left:200px;top:200px;} 75% {left:200px;top:0px;} 100% {left:0px;top:0px;} } </style> <body> <div>这是一个 div</div> </body>
<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {top:0px;left:0px;} 25% {top:200px;left:0px;} 50% {top:200px;left:200px;} 75% {top:0px;left:200px;} 100% {top:0px;left:0px;} } </style> <body> <div>这是一个 div</div> </body>
<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {top:0px; left:0px;} 25% {top:200px; left:0px;} 50% {top:200px; left:200px;} 75% {top:0px; left:200px;} 100% {top:0px; left:0px;} } </style> <body> <div>这是一个 div</div> </body>
不正确点击这里重新尝试。 正确！下一题 ❯ |
这将重置所有 138 个练习的分数。
您确定要继续吗？