js+css实现鼠标跟随2d灯光阴影效果代码-html代码-BFW代码库

js+css实现鼠标跟随2d灯光阴影效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现鼠标跟随2d灯光阴影效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html {
  min-height: 100vh;
  background: #222;
  overflow: hidden;
  box-shadow: inset 0 0 300px 100px black;
  cursor: none;
}
body:after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle, transparent 50%, black);  
}

.solid {
  --solid-size: 100px;
  width: var(--solid-size);
  aspect-ratio: 1/1;
  position: absolute;
  background: 
    radial-gradient(circle at 50% 40%, transparent 60%, rgba(0,0,0,.25) 70%),
    radial-gradient(circle at 50% 60%, transparent 50%, rgba(255,255,255,.2) 60%),
    red;
  border-radius: 50%;  
}
.solid:after {
  content: '';
  width: 100%;
  height: 100vh;
  background: 
    radial-gradient(circle at 50% 0%, transparent calc(var(--solid-size) * .5), rgba(0,0,0,.5) calc(var(--solid-size) * .5), transparent);
  position: absolute;
  left: 0%;
  top: 50%;
  transform-origin: 50% 0;  
  transform: var(--shadow-rot);
  mix-blend-mode: screen;
}

#light {
  width: 50px;
  aspect-ratio: 1/1;
  background: white;
  border-radius: 50%;
  position: absolute;  
  box-shadow: 0 0 200px 50px white;
}
</style>




</head>

<body >
  <!-- Not a perfect solution. 
Does a decent job. 
But only works with circle objects. 
Sorry. -->
<div class='solid'></div>
<div class='solid'></div>
<div class='solid'></div>
<div id='light'></div>

  
      <script.........完整代码请登录后点击上方下载按钮下载查看