css+svg+js实现鼠标交互跟随模糊渐变的玻璃磨砂背景效果代码-html代码-BFW代码库

css+svg+js实现鼠标交互跟随模糊渐变的玻璃磨砂背景效果代码

代码语言：html

所属分类：背景

代码描述：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;
  ba.........完整代码请登录后点击上方下载按钮下载查看