寫程式學習筆記04 - 用CSS Animation製造淡出效果

in hive-180932 •  3 months ago 

Screenshot 2020-04-29 at 18.15.16.png

好的,這一次仍然是CSS Animation的練習,上幾次學了如何替物件製造顏色、移動等的效果,今次學習如何製造淡出效果,算是比較簡單的練習。

其實真的很簡單,只要控制物件的可見度就成了,這裡用的指令是opacity,0%代表完全透明,100%代表不透明。

題目已預設了一個由淺藍漸變到粉紅的圓球,由左邊移動到右邊再回到左邊的效果,而我已將它在移動到最右邊時接近透明,其實很簡單加一句就可以了,將這個animation在50%的時候,opacity設做0.1就成:

@keyframes fade {
50% {
left: 60%;
opacity: 0.1;
}
}

完成!

好了偷看了下一節課,仍是CSS Animation,但課仍是要上的,下次繼續!

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!