css+svg+js实现鼠标交互跟随模糊渐变的玻璃磨砂背景效果代码
代码语言:html
所属分类:背景
代码描述:css+svg+js实现鼠标交互跟随模糊渐变的玻璃磨砂背景效果代码,蓝色光点跟随鼠标移动,与文字层的玻璃磨砂模糊形成对应。
代码标签: css svg js 鼠标 交互 跟随 模糊 渐变 玻璃 磨砂 背景
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); :root { --color-bg1: rgb(8, 10, 15); --color-bg2: rgb(0, 17, 32); --color1: 18, 113, 255; --color2: 107, 74, 255; --color3: 100, 100, 255; --color4: 50, 160, 220; --color5: 80, 47, 122; --color-interactive: 140, 100, 255; --circle-size: 80%; --blending: hard-light; } * { margin: 0; padding: 0; outline: none; list-style: none; text-decoration: none; box-sizing: border-box; color: #FFF; background: transparent; border: none; } html, body { font-family: "Dongle", sans-serif; margin: 0; padding: 0; height: 100%; width: 100%; } body { background: #FFF; font-family: "Montserrat", sans-serif; overflow: hidden; } h1, h2, h3 { font-family: "Montserrat", sans-serif; font-weight: 700; } .card { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); user-select: none; max-width: 600px; padding: 48px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 8px; box-shadow: 0 4px 90px rgba(0, 0, 0, 0.1); overflow: hidden; } .card:before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 2px; background: white; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 34%, white 89%, rgba(255, 255, 255, 0) 100%); opacity: 0.3; filter: blur(0.5px); mix-blend-mode: hard-light; } .card .noise { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; opacity: 0.1; } .card .content { position: relative; z-index: 2; text-shadow: -3px 0px 2px rgba(0, 0, 0, 0.1); } h1 { font-size: 3rem; margin-bottom: 16px; } p { line-height: 1.6; } @keyframes moveInCircle { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes moveVertical { 0% { transform: translateY(-50%); } 50% { transform: translateY(50%); } 100% { transform: translateY(-50%); } } @keyframes moveHorizontal { 0% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } 100% { transform: translateX(-50%) translateY(-10%); } } .gradient-bg { width: 100vw; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2)); top: 0; left: 0; } .gradient-bg .svgBlur { display: none; } .gradient-bg .noiseBg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; mix-blend-mode: soft-light; opacity: 0.3; } .gradient-bg .gradients-container { filter: url(#goo) blur(40px); width: 100%; height: 100%; } .gradient-bg .g1 { position: absolute; background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat; mix-blend-mode: var(--blending); width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); transform-origin: center center; animation: moveVertical 30s ease infinite; opacity: 1; } .gradient-bg .g2 { position: absolute; background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat; mix-blend-mode: var(--blending); width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); transform-origin: calc(50% - 400px); animation: moveInCircle 20s reverse infinite; opacity: 1; } .gradient-bg .g3 { position: absolute; background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat; mix-blend-mode: var(--blending); width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2 + 200px); left: calc(50% - var(--circle-size) / 2 - 500px); transform-origin: calc(50% + 400px); animation: moveInCircle 40s linear infinite; opacity: 1; } .gradient-bg .g4 { position: absolute; background: radial-gradient(circle at.........完整代码请登录后点击上方下载按钮下载查看
网友评论0