寫程式學習筆記06 - CSS Animation的運用

in hive-180932 •  3 months ago 

當了解CSS Animation和keyframe的運用,就開始可以做不同的效果了,例如星星在空中閃動的效果,如果大家還記得web 1.0的年代,那些設計老套的網站背景總有星星在閃,不知道是否也用這方法?

星星比較難,這題目用的是小圓球,首先要設定圓球的形狀:

.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}

把顏色設為白色,大小為30px,再設50%的半徑,就變成白色小圓球。然後我們先做兩佪圓球:

.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
}

.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-name: twinkle-2;
animation-duration: 1s;
}

兩個圓球的分別在於位置的不同,動態效果都是1秒。最後是設keyframe了,讓兩個圓球都閃得不一樣,不要太單調:

@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}

@keyframes twinkle-2 {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}

讓圓球縮少到一半,半透明,就可達到閃閃的效果,分別是圓球1要用半秒去做,圓球2只用0.2秒去完成這動作。

結果就會是這樣:

ezgif.com-video-to-gif (1).gif

感覺是不是很有趣,只要再多弄幾個,就滿天星星了!不過,是否可以設random數據,不用一個個的自己設定?

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:  

加油!@aaronli
来自鸽子在Marlians的支持。