svg+js实现跟随鼠标移动粘糊糊水滴液态光标效果代码-html代码-BFW代码库

svg+js实现跟随鼠标移动粘糊糊水滴液态光标效果代码

代码语言：html

所属分类：其他

代码描述：svg+js实现跟随鼠标移动粘糊糊水滴液态光标效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>

:root {
  --cursor-size: 28px;
  --bg: #FAF7EE;
}

.page-wrap {
  background: var(--bg);
  min-height: 100vh;
}

#cursor {
  position: fixed;
  top: calc(var(--cursor-size) * -0.5);
  left:  calc(var(--cursor-size) * -0.5);
  pointer-events: none;
  mix-blend-mode: difference;  
  filter: url(#goo);
}

.cursor-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: var(--cursor-size);
  background: var(--bg);
  transform-origin: center center;
}

body {
  overflow-x: hidden;
}

h1 {
  margin: 20px;
  padding: 50px;
  text-align: center;
  font-size: 48px;
  line-height: 1;
  font-family: sans-serif;
  text-transform: uppercase;
  user-select: none;
}

.goo {
  display: none;
}
</style>


  
  
</head>

<body translate="no">
  <svg xmlns="http://www.w3.org/2000/svg" class="goo" version="1.1" width="100%">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"></feGaussianBlur>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -15" result="goo"></feColorMatrix>
            <feComposite in="SourceGraphic" in2="goo".........完整代码请登录后点击上方下载按钮下载查看