寫程式學習筆記01 - 用CSS Animation更改按鈕hover顏色

in hive-180932 •  last year 

說到要做到,今天開始寫筆記。

其實我在Freecodecamp已學習了基本的HTML及CSS,現在的單完叫Applied Visual Design,就是一些Visual Design的應用,亦已開始了一半。這一課教我用keyframe來更改hover顏色來學習keyframe的用法。

Hover中文是什麼我不知道,其實就是我們平日上網時,把滑鼠移到一個按鈕時,它會變色或放大,這個效果就叫hover。keyframe中文叫關鍵影格,這term在我剪片時都常常用到,就是可以控制變化的速度,例如我設0%是藍色,50%是紅色,100%是黃色,那它就會在設定的時間內按以上時間比例去換顏色。

言歸正傳,我這次的習作是當滑鼠移到按鈕時,它會變成#4791d0的顏色。

Screenshot 2020-04-22 at 20.37.51.png

這個題目很簡單,只要在style內加上

@keyframes background-color {
100% {
background-color: #4791d0;
}
}

Screenshot 2020-04-22 at 20.42.40.png

由於原來的代碼已為按鈕的顏色hover設定animation,那麼我只要在background-color設定keyframe,100%設做#4791d0, 那麼就成了。

好了,這一課結束,下次繼續。

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

没事学习写程序,你打算成为程序员吧

拍拍拍

多學新知識也是好事,未來可寫機器人