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:

如下是滑鼠移過圖片，寬度變化的小影片

 1 <style>
 2   img:hover {
 3     animation-name: width;
 4     animation-duration: 500ms;
 5   }
 6 
 7   @keyframes width {
 8     100% {
 9       width: 40px;
10     }
11   }
12 </style>
13 
14 <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%.

練習代碼：

 1 <style>
 2   button {
 3     border-radius: 5px;
 4     color: white;
 5     background-color: #0F5897;
 6     padding: 5px 10px 8px 10px;
 7   }
 8 
 9   button:hover {
10     animation-name: background-color;
11     animation-duration: 500ms;
12   }
13   @keyframes background-color {
14     100% {
15       background-color: #4791d0;
16     }
17   }
18 </style>
19 <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;

所以添加后代碼：

 1 <style>
 2   button {
 3     border-radius: 5px;
 4     color: white;
 5     background-color: #0F5897;
 6     padding: 5px 10px 8px 10px;
 7   }
 8   button:hover {
 9     animation-name: background-color;
10     animation-duration: 500ms;
11     /* add your code below this line */
12     animation-fill-mode: forwards;
13     /* add your code above this line */
14   }
15   @keyframes background-color {
16     100% {
17       background-color: #4791d0;
18     }
19   }
20 </style>
21 <button>Register</button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/115114.html

標籤：Html/Css

上一篇：HTML連載44-標準排版、浮動排版

下一篇：免費搜索引擎提交(登錄)入口大全