matter实现鼠标悬浮移轴模糊效果代码-html代码-BFW代码库

matter实现鼠标悬浮移轴模糊效果代码

代码语言：html

所属分类：悬停

代码描述：matter实现鼠标悬浮移轴模糊效果代码，结合了pathseg及matter-attractors插件。

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
:root {
  --y: 50%;
  --blur: 0.5vmax;
  --focus-range: 1vh;
  --blur-range: 25vh;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background-color: black;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  overflow: hidden;
  /*
  cursor: none;
  */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
body {
  width: 100vw;
  height: 100vh;
  font-family: "Montserrat", serif;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  z-index: 1;
}
h1 {
  font-size: 5vw;
  color: #fff;
}
#bg,
#bg_mask {
  /* ふちボケ対策 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: calc(var(--blur) * -1);

  background: url(//repo.bfw.wiki/bfwrepo/image/64705f239a789.png)
    no-repeat center bottom/cover;
}
#bg {
  filter: blur(var(--blur));
}
#bg_mask {
  -webkit-mask-image: linear-gradient(
    transparent,
    transparent calc(var(--y) - var(--focus-range) - var(--blur-range)),
    black calc(var(--y) - var(--focus-range)),
    black var(--y),
    black calc(var(--y) + var(--fo.........完整代码请登录后点击上方下载按钮下载查看