正文
FCC---Use CSS Animation to Change the Hover State of a Button---鼠标移过，背景色变色，用0.5s的动画制作
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
You can use CSS
@keyframes
to change the color of a button in its hover state.
Here's an example of changing the width of an image on hover:
如下是鼠标移过图片，宽度变化的小动画
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
} @keyframes width {
100% {
width: 40px;
}
}
</style> <img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
练习题目：
Note that
ms
stands for milliseconds, where 1000ms is equal to 1s.
Use CSS
@keyframes
to change the
background-color
of the
button
element so it becomes
#4791d0
when a user hovers over it.
The
@keyframes
rule should only have an entry for
100%
.
练习代码：
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
} button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
效果如下：
无
问题:
因为持续时间只设置了0.5s，所以动画结束，按钮的颜色就变暗了。
如果希望鼠标放在上面，按钮一直保持高亮
通过如下设置，可以改进：
That's great, but it doesn't work right yet.
Notice how the animation resets after
500ms
has passed, causing the button to revert back to the original color.
You want the button to stay highlighted.
This can be done by setting the
animation-fill-mode
property to
forwards
. The
animation-fill-mode
specifies the style applied to an element when the animation has finished. You can set it like so:
animation-fill-mode: forwards;
所以添加后代码：
<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 */
animation-fill-mode: forwards;
/* add your code above this line */
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
