div+css实现下雨动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现下雨动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #222; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 1200px; } body *:not(:empty) { transform-style: preserve-3d; } .scene { position: relative; } .drop { position: absolute; left: 0; bottom: -25vh; width: 1px; height: 100vh; transform: translate3d(var(--tx, 0), 0, var(--tz, 0)); transform-style: preserve-3d; background-image: linear-gradient(transparent 95vh, #def3); -webkit-animation: drop 12s var(--delay, 0s) ease-in infinite; animation: drop 12s var(--delay, 0s) ease-in infinite; } @-webkit-keyframes drop { 0%, 75% { background-position-y: 5vh; } 100% { background-position-y: 105vh; } } @keyframes drop { 0%, 75% { background-position-y: 5vh; } 100% { background-position-y: 105vh; } } .drop:nth-child(1) { --delay: 0s; --tx: 9vmin; --tz: 21.75vmin; } .drop:nth-child(2) { --delay: -0.25s; --tx: -24vmin; --tz: 7.5vmin; } .drop:nth-child(3) { --delay: -0.5s; --tx: -24.5vmin; --tz: -15.75vmin; } .drop:nth-child(4) { --delay: -0.75s; --tx: -15.75vmin; --tz: 14.75vmin; } .drop:nth-child(5) { --delay: -1s; --tx: -16vmin; --tz: 16vmin; } .drop:nth-child(6) { --delay: -1.25s; --tx: -0.25vmin; --tz: 19.5vmin; } .drop:nth-child(7) { --delay: -1.5s; --tx: 22vmin; --tz: 1.75vmin; } .drop:nth-child(8) { --delay: -1.75s; --tx: -20vmin; --tz: -1.25vmin; } .drop:nth-child(9) { --delay: -2s; --tx: -17.75vmin; --tz: -11.5vmin; } .drop:nth-child(10) { --delay: -2.25s; --tx: 18vmin; --tz: 17vmin; } .drop:nth-child(11) { --delay: -2.5s; --tx: 19.75vmin; --tz: 11vmin; } .drop:nth-child(12) { --delay: -2.75s; --tx: -20.5vmin; --tz: -19.25vmin; } .drop:nth-child(13) { --delay: -3s; --tx: 3.75vmin; --tz: -16.25vmin; } .drop:nth-child(14) { --delay: -3.25s; --tx: 7.5vmin; --tz: -23.25vmin; } .drop:nth-child(15) { --delay: -3.5s; --tx: -14.5vmin; --tz: 11.25vmin; } .drop:nth-child(16) { --delay: -3.75s; --tx: -16.75vmin; --tz: 22.25vmin; } .drop:nth-child(17) { --delay: -4s; --tx: -14.75vmin; --tz: 24.25vmin; } .drop:nth-child(18) { --delay: -4.25s; --tx: -22vmin; --tz: 12.25vmin; } .drop:nth-child(19) { --delay: -4.5s; --tx: -7.5vmin; --tz: -14.75vmin; } .drop:nth-child(20) { --delay: -4.75s; --tx: -1.5vmin; --tz: 22.75vmin; } .drop:nth-child(21) { --delay: -5s; --tx: 10vmin; --tz: 23vmin; } .drop:nth-child(22) { --delay: -5.25s; --tx: -6.25vmin; --tz: -4.5vmin; } .drop:nth-child(23) { --delay: -5.5s; --tx: -15vmin; --tz: 9vmin; } .drop:nth-child(24) { --delay: -5.75s; --tx: -11.75vmin; --tz: 12.5vmin; } .drop:nth-child(25) { --delay: -6s; --tx: -4.5vmin; --tz: -1.5vmin; } .drop:nth-child(26) { --delay: -6.25s; --tx: 9vmin; --tz: 7.25vmin; } .drop:nth-child(27) { --delay: -6.5s; --tx: -4.25vmin; --tz: 10.5vmin; } .drop:nth-child(28) { --delay: -6.75s; --tx: -7.5vmin; --tz: -23.25vmin; } .drop:nth-child(29) { --delay: -7s; --tx: 14.75vmin; --tz: 22.5vmin; } .drop:nth-child(30) { --delay: -7.25s; --tx: 19.75vmin; --tz: 0.25vmin; } .drop:nth-child(31) { --delay: -7.5s; --tx: -9.5vmin; --tz: 15.75vmin; } .drop:nth-child(32) { --delay: -7.75s; --tx: -18.5vmin; --tz: -5vmin; } .drop:nth-child(33) { --delay: -8s; --tx: 19.75vmin; --tz: 13vmin; } .drop:nth-child(34) { --delay: -8.25s; --tx: -15.75vmin; --tz: -8.5vmin; } .drop:nth-child(35) { --delay: -8.5s; --tx: 19.25vmin; --tz: 2.25vmin; } .drop:nth-child(36) { --delay: -8.75s; --tx: 2.25vmin; --tz: -4.25vmin; } .drop:nth-child(37) { --delay: -9s; --tx: -15vmin; --tz: -17.25vmin; } .drop:nth-child(38) { --delay: -9.25s; --tx: -3vmin; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0