2.1 KiB
2.1 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a7367417b2b2512ae0 | Use CSS Animation to Change the Hover State of a Button | 0 | 使用CSS动画更改按钮的悬停状态 |
Description
@keyframes
更改悬停状态下按钮的颜色。以下是在悬停时更改图像宽度的示例: <风格>
img:hover {
动画名称:宽度;
动画持续时间:500ms;
}
@keyframes width {
100%{
宽度:40px;
}
}
</样式>
<img src =“https://bit.ly/smallgooglelogo"alt =”Google的徽标“/>
Instructions
ms
表示毫秒,其中1000毫秒等于1秒。使用CSS @keyframes
更改button
元素的background-color
,以便当用户将鼠标悬停在其上时变为#4791d0
。 @keyframes
规则应该只有100%
的条目。 Tests
tests:
- text: '@keyframes规则应使用<code>animation-name</code> background-color。'
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
- text: '<code>@keyframes</code>下应该有一条规则将<code>background-color</code>更改为<code>#4791d0</code>为100%。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
Challenge Seed
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
</style>
<button>Register</button>
Solution
// solution required