2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
id: 58a7a6ebf9a6318348e2d5aa
|
|
|
|
challengeType: 0
|
2020-02-11 07:46:34 +00:00
|
|
|
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
|
|
|
forumTopicId: 301064
|
2020-10-01 15:54:21 +00:00
|
|
|
title: 修改动画的填充模式
|
2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
|
|
|
## Description
|
2020-02-11 07:46:34 +00:00
|
|
|
<section id='description'>
|
|
|
|
太棒了,但是现在还不完美。注意动画在 <code>500ms</code> 之后重置了,所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。
|
|
|
|
这可以通过把 <code>animation-fill-mode</code> 设置成 <code>forwards</code> 来实现。<code>animation-fill-mode</code> 指定了在动画结束时元素的样式。你可以向这样设置它:
|
|
|
|
<code>animation-fill-mode: forwards;</code>
|
|
|
|
</section>
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
## Instructions
|
2020-02-11 07:46:34 +00:00
|
|
|
<section id='instructions'>
|
|
|
|
设置 <code>button:hover</code> 的 <code>animation-fill-mode</code>,使按钮悬停时保持高亮。
|
|
|
|
</section>
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
## Tests
|
|
|
|
<section id='tests'>
|
|
|
|
|
|
|
|
```yml
|
|
|
|
tests:
|
2020-02-11 07:46:34 +00:00
|
|
|
- text: '<code>button:hover</code> 应该有一个值为 <code>forwards</code> 的 <code>animation-fill-mode</code> 的属性。'
|
2020-02-17 16:40:55 +00:00
|
|
|
testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
## Challenge Seed
|
|
|
|
<section id='challengeSeed'>
|
|
|
|
|
|
|
|
<div id='html-seed'>
|
|
|
|
|
|
|
|
```html
|
|
|
|
<style>
|
|
|
|
button {
|
|
|
|
border-radius: 5px;
|
|
|
|
color: white;
|
|
|
|
background-color: #0F5897;
|
|
|
|
padding: 5px 10px 8px 10px;
|
|
|
|
}
|
|
|
|
button:hover {
|
|
|
|
animation-name: background-color;
|
|
|
|
animation-duration: 500ms;
|
|
|
|
/* add your code below this line */
|
2020-02-11 07:46:34 +00:00
|
|
|
|
2018-10-10 22:03:03 +00:00
|
|
|
/* add your code above this line */
|
|
|
|
}
|
|
|
|
@keyframes background-color {
|
|
|
|
100% {
|
|
|
|
background-color: #4791d0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
2020-02-11 07:46:34 +00:00
|
|
|
<button>注册</button>
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
## Solution
|
|
|
|
<section id='solution'>
|
|
|
|
|
2020-02-11 07:46:34 +00:00
|
|
|
|
|
|
|
```html
|
2018-10-10 22:03:03 +00:00
|
|
|
// solution required
|
|
|
|
```
|
2020-02-11 07:46:34 +00:00
|
|
|
|
2018-10-10 22:03:03 +00:00
|
|
|
</section>
|
2020-02-11 07:46:34 +00:00
|
|
|
|