原生js粒子下彩色雨效果
代码语言:html
所属分类:粒子
代码描述:原生js粒子下彩色雨效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; color: #aaa; } @media (prefers-color-scheme: dark) { body { background-color: #000; color: #aaa; } h3 { margin: 0; color: #ddd; } } .grid { height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } .drop { width: 8px; height: 8px; position: fixed; top: -8px; background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; animation: drop 1s infinite linear; z-index: 50; } @keyframes drop { from { top: -8px; filter: none; } 20% { filter: none; } to { top: 100vh; filter: blur(16px); } } .popup { position: fixed; left: 0; right: 0; bottom: 8px; z-index: 100; } .centered-popup-content { width: max-content; margin: 8px auto; padding: 8px; border-radius: 8px; backdrop-filter: blur.........完整代码请登录后点击上方下载按钮下载查看
网友评论0