寫程式學習筆記03 - 用CSS Animation製造移動效果

in hive-180932 •  3 months ago 

之前學習了CSS的Animation,用keyframes來控制物件在一個時間段的變化,這一次我學習用同樣方法來製造物件的移動。

Screenshot 2020-04-27 at 21.26.06.png

對呀,既然keyframes能控制顏色變化,為何不能控制物件的移動?這一節課就教我如何令物件移動:Top, Left, Bottom, Right。

原例子中,只要在不同的時間段更改物件的Top數字,就能做成上下移動效果(順便問問:Steemit可以顯示這些CSS效果嗎?):

@keyframes rainbow {
0% {
background-color: blue;
top: 0px;

}
50% {
  background-color: green;
  top: 50px;

}
100% {
  background-color: yellow;
  top: 0px;

在這代碼中,物件一開始是在頂部,顏色是藍色,跟著它會向下移動50px,顏色變成綠色,最後物件移回原位,顏色變成黃色。

我這次的功課是幫這物件加一個橫移效果,先向右移動25px,回到原位再向左移動25px,那麼,我就在keyframes的0%,50%及100%加上一句代碼:

@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
left: 0px;
}
50% {
background-color: green;
top: 50px;
left: 25px;
}
100% {
background-color: yellow;
top: 0px;
left: -25px;
}
}

這樣就可以了!

其實很想在文章顯示變化效果,但我不知如何令它顯示出來,求大神們指教!

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:  

阿柔会写mp3播放器了,试试写个可以用在steem区块链上的

拍拍拍

相信還要一段日子哈哈

文章用markdown 格式,或許可以試試貼gif 或是link
啪啪啪

係喎,用gif試下