.leaf { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .leaf img { width: 75px; height: 75px; } .leaf div:nth-child(1) { left: 20%; animation: fall 22s linear infinite; animation-delay: -2s; } .leaf div:nth-child(2) { left: 70%; animation: fall 18s linear infinite; animation-delay: -4s; } .leaf div:nth-child(3) { left: 10%; animation: fall 21s linear infinite; animation-delay: -7s; } .leaf div:nth-child(4) { left: 50%; animation: fall 24s linear infinite; animation-delay: -5s; } .leaf div:nth-child(5) { left: 85%; animation: fall 19s linear infinite; animation-delay: -5s; } .leaf div:nth-child(6) { left: 15%; animation: fall 23s linear infinite; animation-delay: -10s; } .leaf div:nth-child(7) { left: 90%; animation: fall 20s linear infinite; animation-delay: -4s; } .leaf2 { transform: scale(1.6) translate(5%, -5%) rotate(15deg); filter: blur(1px); z-index: 10; } .leaf3 { filter: blur(2px); transform: scale(0.8) translate(-5%, 10%) rotate(170deg); } @keyframes fall { 0% { top: -30%; transform: translateX(20px) rotate(0deg); } 20% { transform: translateX(-20px) rotate(45deg); } 40% { transform: translateX(20px) rotate(90deg); } 60% { transform: translateX(-20px) rotate(135deg); } 80% { transform: translateX(20px) rotate(180deg); } 100% { top: 150%; transform: translateX(-20px) rotate(225deg); } }
主要就是通过清晰与模糊两种状态的对比，速度的差异，来构建视差效果。