金幣雨CSS是一種非常受歡迎的CSS技術,它可以在網頁上創建一個金幣雨的效果。這個效果可以用在很多地方,比如電商網站的訂單支付頁面、游戲懸賞任務頁面等等。
實現這個效果需要用到CSS3的animation動畫。下面是一個實現金幣雨效果的CSS代碼:
.gold{ position: fixed; top: -50px; left: 0; width: 100%; animation: goldRain 10s ease-in-out forwards; } @keyframes goldRain { 0% { transform: translateY(-100%); } 100%{ transform: translateY(100vh); } }
上面的代碼用到了一個名為.gold的CSS樣式,這個樣式表示金幣。使用position屬性將金幣固定在頁面的頂部,并使用animation屬性實現金幣的下落效果。
而@keyframes關鍵字則表明了這個動畫的時間軸。其中0%表示金幣的起始位置,100%表示金幣的結束位置。transform屬性用于平移金幣的位置,通過translateY函數平移Y軸實現金幣下落的效果。
最后,我們只需要在HTML中添加一個.gold元素,就能在頁面上看到下落的金幣了。
上一篇css設置表格沒有間距
下一篇針對所有的CSS樣式表