css+js实现鼠标跟随聚光灯照射404页面代码-html代码-BFW代码库

css+js实现鼠标跟随聚光灯照射404页面代码

代码语言：html

所属分类：其他

代码描述：css+js实现鼠标跟随聚光灯照射404页面代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
  --darkness: rgb(0 0 0 / 50%);
  --torch-radius: 250;
  --position-y: 100px;
  --position-x: 100px;
}

* {
  box-sizing: border-box;
}

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

h1 {
  text-shadow: 2px 2px 0 rgb(0 0 0 / 50%), 4px 4px 2px rgb(0 0 0 / 70%)
}

.container{
  background: #0e297e;
  
  width: 100%;
  height: 100%;
}

.container::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--darkness);
  background-image: radial-gradient( circle closest-side at var(--position-x) var(--position-y), #FFF 0%, #FFF, var(--darkness) var(--torch-radius)px, var(--darkness), var(--darkness));
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-animation: animate-torch 10s ease infinite alternate;
          animation: animate-torch 10s ease infinite alternate;
  transition: background-image 2s ease;
}


.content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 8vw;
  font-family: sans-serif;
  letter-spacing: -1.2vw;
  color: #0c31a7;
}

.light {
  position: absolute;
  top: 0;
  left: 0;
  width: 25vw;
  height: 25vw;
  background: #FFF;
  z-index: 5;
  
  filter: blur(00px);
  border-radius: 25vw;
  opacity:1;
  
  mix-blend-mode: hard-light;
  
  display: none;
  
}

@-webkit-keyframes animate-torch {
  0%{
      --position-y: 300px;
      --position-x: 300px;
  }
  100%{
    --position-x: 500px;
    --position-Y: 500px;
  }
}

@keyframes animate-torch {
  0%{
      --position-y: 300px;
      --position-x: 300px;
  }
  100%{
    --position-x: 500px;
    --position-Y: 500px;
  }
}
</style>



</head>

<body >
  <div class="container">
  <span class="light"></span>

  <div class="content">
    <h1>
      4 0 4
    </h1>
    <button>Back home</button>
  </div>

  
      <script  >
//https://www.superhi.com/video/smooth-movements-wit.........完整代码请登录后点击上方下载按钮下载查看