css+js实现水滴落下下雨涟漪动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现水滴落下下雨涟漪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --background-color: black; } @property --M { syntax: "<percentage>"; inherits: false; initial-value: 0%; } body { padding: 0; margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: "Chakra Petch", sans-serif; overflow: hidden; letter-spacing: 0.4em; background: var(--background-color); perspective: 900px; transform-style: preserve-3d; } .scene { position: absolute; width: 600px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; transform: rotateX(70deg); perspective: 1200px; transform-style: preserve-3d; isolation: isolate; } span { position: relative; width: calc(100% / 5); aspect-ratio: 1; display: inherit; align-items: inherit; justify-content: inherit; transform: rotateX(-52deg); filter: drop-shadow(0 3px 20px #fff) drop-shadow(0 2px 5px rgba(0, 229, 255, .7)); &:before { content: ''; position: absolute; left: 0; right: 0; bottom: 60px; margin: auto; width: 4px; height: 300vh; background: rgba(255,255,255,.7); mask: 200px linear-gradient(to bottom, white var(--M), transparent 0%); } i { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, transparent 50%, white 90%); transform: scale(0); box-shadow: 0 0 5px 5px white, inset 0 0 5px 5px white; } &.active { &:before { animation: light .8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } i { animation: wave .9s 2.2s linear forwards; animation-delay: calc((sqrt(var(--j)) - .7) * .7s); } } } @keyframes wave { 0% { opacity: 1; transform: translateY(0) scale(0); } 100% { opacity: 0; transform: translateY(calc(pow(var(--j), .5) * 9px)) scale(calc(sqrt(var(--j)) * 1)); } } @keyframes light { 0% { --M: 0%; opacity: 1; } 99% { --M: 100%; } 100% { opacity: 0; --m: 0%; } } </style> </head> <body translate="no"> <div class="scene"> <span class="light" style="--i: 1;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 2;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 3;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 4;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 5;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="test" style="--i: 6;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 7;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 8;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 9;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 10;"> <i style="--j: 1;"></i> <i style="--j: 2;"></i> <i style="--j: 3;"></i> <i style="--j: 4;"></i> <i style="--j: 5;"></i> </span> <span class="light" style="--i: 11;"> <i style="--j: 1;"></i> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0