CSS3金幣掉落動態圖是一種炫酷的動畫效果,可以用于網站的背景或者頁面中的特效。
/* 定義金幣圖像 */ .gold { background-image: url('gold.png'); width: 20px; height: 20px; position: absolute; } /* 定義動畫 */ @keyframes drop { 0% { transform: translateY(-1000px) rotate(360deg); opacity: 0; } 50% { transform: translateY(400px) rotate(180deg); opacity: 1; } 100% { transform: translateY(800px) rotate(360deg); opacity: 0; } } /* 定義金幣掉落區域 */ .coin-container { width: 100%; height: 400px; position: relative; overflow: hidden; } /* 添加金幣元素 */ .coin-container div { animation: drop 2s linear infinite; } /* 插入金幣到頁面中 */ var container = document.getElementsByClassName('coin-container')[0]; for(var i=0; i<50; i++) { var coin = document.createElement('div'); coin.className = 'gold'; coin.style.left = Math.random()*100 + '%'; coin.style.animationDelay = Math.random()*2 + 's'; container.appendChild(coin); }
上述代碼中,.gold類定義了金幣的圖像和布局,@keyframes drop定義了金幣掉落的動畫效果,.coin-container類定義了容器的布局和樣式,通過JavaScript插入50個金幣元素到容器中,并分別設置他們的位置和動畫延遲時間。
結合上述代碼,我們可以快速實現一個炫酷的金幣掉落動態圖效果。
上一篇css3遮罩特效
下一篇css3里元素的上一個