3.0 KiB
3.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a7367417b2b2512ae1 | Create Movement Using CSS Animation | 0 | 使用CSS动画创建运动 |
Description
position
(例如fixed
或relative
,可以在动画规则中使用right
, left
, top
和bottom
的CSS偏移属性来创建移动。如下面的示例所示,您可以通过将50%
关键帧的top
属性设置为50px向下然后向上推动项目,但将第一个( 0%
)和最后一个( 100%
)关键帧设置为0px。 @keyframes rainbow {
0%{
背景颜色:蓝色;
顶部:0px;
}
50%{
背景颜色:绿色;
上:50px;
}
100%{
背景颜色:黄色;
顶部:0px;
}
}
Instructions
div
动画添加水平运动。使用left
偏移属性,添加到@keyframes
规则,因此彩虹从0%
0像素开始,在50%
移动到25像素,在100%
以-25像素结束。不要替换编辑器中的top
属性 - 动画应该具有垂直和水平运动。 Tests
tests:
- text: <code>0%</code>的<code>@keyframes</code>规则应使用0px的<code>left</code>偏移量。
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");'
- text: <code>50%</code>的<code>@keyframes</code>规则应该使用25px的<code>left</code>偏移量。
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");'
- text: <code>100%</code>的<code>@keyframes</code>规则应使用-25px的<code>left</code>偏移量。
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");'
Challenge Seed
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
</style>
<div id="rect"></div>
Solution
// solution required