在網頁設計中,CSS動畫是非常實用的一種技術。今天我們來分享一個非常酷炫的CSS動畫——星空效果。
//創建容器 .section { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } //創建星星 .star { width: 2px; height: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); position: absolute; top: -50px; animation: animStar 50s linear infinite; } //創建動畫 @keyframes animStar { from { transform: translateY(0); } to { transform: translateY(200vh); } } //主體部分
通過CSS動畫,我們可以輕松實現這樣一個炫酷的星空效果,在網頁設計中增加一份浪漫和神秘的氛圍。
上一篇css動畫流動效果
下一篇css動畫最小時間間隔