纯css实现窗外风雨交加动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现窗外风雨交加动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --size: 45vmin; --pull: 1vmin; --height-sill: calc(var(--size) / 4); --height-ac: calc(var(--size) / 2.75); --height-curtain-rod: calc(var(--size) / 40); --color-wall: hsl(8, 72%, 72%); --color-frame: hsl(0, 100%, 100%); --color-ac-unit: hsl(72, 2%, 97%); --color-ac-unit-inner: hsl(0, 0%, 70%); --color-outside: hsl(213, 74%, 40%); --color-curtain-rod: hsl(18, 80%, 10%); --color-book-1: hsl(55, 100%, 48%); --color-book-2: hsl(178, 93%, 21%); --color-book-3: hsl(194, 100%, 48%); --color-planter: hsl(0, 100%, 100%); --color-leaf: hsl(72, 40%, 43%); --border-frame: 2.5vmin; --border-radius: 0.25vmin; } * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; background-color: var(--color-wall); } .frame { display: grid; position: relative; margin-top: calc(var(--height-sill) * -1); width: var(--size); height: calc(var(--size) * 1.5); border-radius: var(--border-radius) var(--border-radius) 0 0; background-color: var(--color-frame); } .outside { position: absolute; width: 100%; height: 100%; background-color: var(--color-outside); overflow: hidden; -webkit-animation: flash 10s linear infinite; animation: flash 10s linear infinite; } .rain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: rotate(25deg); transform: rotate(25deg); } .drop { position: absolute; background-color: rgba(255, 255, 255, 0.3); width: 1px; height: 4vmin; -webkit-animation: fall 200ms linear infinite; animation: fall 200ms linear infinite; } .drop:nth-child(1) { top: 92%; left: 48%; -webkit-animation-delay: -0.03s; animation-delay: -0.03s; -webkit-animation-duration: 203ms; animation-duration: 203ms; } .drop:nth-child(2) { top: 82%; left: 98%; -webkit-animation-delay: -0.06s; animation-delay: -0.06s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(3) { top: 32%; left: 26%; -webkit-animation-delay: -0.09s; animation-delay: -0.09s; -webkit-animation-duration: 201ms; animation-duration: 201ms; } .drop:nth-child(4) { top: 12%; left: 64%; -webkit-animation-delay: -0.12s; animation-delay: -0.12s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(5) { top: 92%; left: 66%; -webkit-animation-delay: -0.15s; animation-delay: -0.15s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(6) { top: 82%; left: 38%; -webkit-animation-delay: -0.18s; animation-delay: -0.18s; -webkit-animation-duration: 204ms; animation-duration: 204ms; } .drop:nth-child(7) { top: 58%; left: 92%; -webkit-animation-delay: -0.21s; animation-delay: -0.21s; -webkit-animation-duration: 201ms; animation-duration: 201ms; } .drop:nth-child(8) { top: 62%; left: 28%; -webkit-animation-delay: -0.24s; animation-delay: -0.24s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(9) { top: 34%; left: 100%; -webkit-animation-delay: -0.27s; animation-delay: -0.27s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(10) { top: 92%; left: 36%; -webkit-animation-delay: -0.3s; animation-delay: -0.3s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(11) { top: 56%; left: 4%; -webkit-animation-delay: -0.33s; animation-delay: -0.33s; -webkit-animation-duration: 208ms; animation-duration: 208ms; } .drop:nth-child(12) { top: 44%; left: 96%; -webkit-animation-delay: -0.36s; animation-delay: -0.36s; -webkit-animation-duration: 204ms; animation-duration: 204ms; } .drop:nth-child(13) { top: 82%; left: 56%; -webkit-animation-delay: -0.39s; animation-delay: -0.39s; -webkit-animation-duration: 203ms; animation-duration: 203ms; } .drop:nth-child(14) { top: 66%; left: 16%; -webkit-animation-delay: -0.42s; animation-delay: -0.42s; -webkit-animation-duration: 205ms; animation-duration: 205ms; } .drop:nth-child(15) { top: 56%; left: 2%; -webkit-animation-delay: -0.45s; animation-delay: -0.45s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(16) { top: 60%; left: 96%; -webkit-animation-delay: -0.48s; animation-delay: -0.48s; -webkit-animation-duration: 201ms; animation-duration: 201ms; } .drop:nth-child(17) { top: 18%; left: 10%; -webkit-animation-delay: -0.51s; animation-delay: -0.51s; -webkit-animation-duration: 206ms; animation-duration: 206ms; } .drop:nth-child(18) { top: 16%; left: 72%; -webkit-animation-delay: -0.54s; animation-delay: -0.54s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(19) { top: 52%; left: 96%; -webkit-animation-delay: -0.57s; animation-delay: -0.57s; -webkit-animation-duration: 210ms; animation-duration: 210ms; } .drop:nth-child(20) { top: 76%; left: 72%; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(21) { top: 32%; left: 68%; -webkit-animation-delay: -0.63s; animation-delay: -0.63s; -webkit-animation-duration: 201ms; animation-duration: 201ms; } .drop:nth-child(22) { top: 30%; left: 44%; -webkit-animation-delay: -0.66s; animation-delay: -0.66s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(23) { top: 64%; left: 86%; -webkit-animation-delay: -0.69s; animation-delay: -0.69s; -webkit-animation-duration: 203ms; animation-duration: 203ms; } .drop:nth-child(24) { top: 76%; left: 40%; -webkit-animation-delay: -0.72s; animation-delay: -0.72s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(25) { top: 28%; left: 6%; -webkit-animation-delay: -0.75s; animation-delay: -0.75s; -webkit-animation-duration: 206ms; animation-duration: 206ms; } .drop:nth-child(26) { top: 56%; left: 84%; -webkit-animation-delay: -0.78s; animation-delay: -0.78s; -webkit-animation-duration: 206ms; animation-duration: 206ms; } .drop:nth-child(27) { top: 60%; left: 96%; -webkit-animation-delay: -0.81s; animation-delay: -0.81s; -webkit-animation-duration: 206ms; animation-duration: 206ms; } .drop:nth-child(28) { top: 92%; left: 56%; -webkit-animation-delay: -0.84s; animation-delay: -0.84s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(29) { top: 100%; left: 20%; -webkit-animation-delay: -0.87s; animation-delay: -0.87s; -webkit-animation-duration: 201ms; animation-duration: 201ms; } .drop:nth-child(30) { top: 80%; left: 32%; -webkit-animation-delay: -0.9s; animation-delay: -0.9s; -webkit-animation-duration: 205ms; animation-duration: 205ms; } .curtain-rod { position: absolute; top: calc(var(--border-frame) / 4); left: 50%; width: calc(100% + (var(--pull) * 4) - 0.5vmin); height: var(--height-curtain-rod); background-color: var(--color-curtain-rod); border-radius: var(--border-radius); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .curtain { position: absolute; top: calc((var(--border-frame) / 4) - 0.25vmin); height: calc(100% - var(--height-ac)); width: 40%; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px); border-radius: calc(var(--border-radius) * 2) 0 100% calc(var(--border-radius) * 2); box-shadow: rgba(0, 0, 0, 0.06) 1vmin 1vmin 2vmin; } .curtain::before, .curtain::after { content: ""; position: absolute; top: 0; height: 100%; border-radius: inherit; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 2px, transparent 2px, transparent 3px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 2px, transparent 2px, transparent 3px); } .curtain::before { left: 5%; width: 80%; } .curtain::after { left: 5%; width: 60%; } .curtain.left { left: -1vmin; } .curtain.right { right: -1vmin; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .window { position: relative; background-color: transparent; border: var(--border-frame) solid var(--color-frame); border-radius: inherit; z-index: 0; } .window.top { box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 4vmin; } .window.bottom { top: calc(var(--height-ac) * -1); box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 4vmin, rgba(0, 0, 0, 0.1) 0 -2vmin 1.5vmin -1vmin; } .ac { display: -webkit-box; display: flex; position: absolute; bottom: 0; width: 100%; height:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0