淘寶頁面是經常有各種特效的,其中下雪特效是比較常見的一個。下面是淘寶css下雪代碼:
/* 雪花效果 */ @keyframes snow { 0% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } .snow { position: fixed; left: 0; top: 0; pointer-events: none; } .snow div { color: #fff; font-size: 20px; position: absolute; top: 0; display: block; width: 10px; height: 10px; background: #000; box-shadow: 0 0 10px #fff; animation: snow 10s linear infinite; } .snow div:nth-child(1) { left: 20%; } .snow div:nth-child(2) { left: 40%; animation-delay: 2s; animation-duration: 8s; } .snow div:nth-child(3) { left: 60%; animation-delay: 4s; animation-duration: 6s; } .snow div:nth-child(4) { left: 80%; animation-delay: 6s; animation-duration: 4s; }
這段代碼使用了CSS3動畫效果來實現雪花飄落的效果。首先定義了一個下雪的關鍵幀 @keyframes snow,在其中定義了雪花的位置、透明度等信息。然后定義了樣式 .snow 來實現雪花的位置固定在頁面頂部。最后用樣式 .snow div 來定義雪花的樣式,包括顏色、大小、動畫效果等。
這個下雪特效可以用在很多網站中,不僅僅是淘寶??梢栽囋嚰拥阶约旱木W站中,為網站增添些許趣味性。