css实现鼠标悬浮小球立体光照邻近反应交互效果代码-html代码-BFW代码库

css实现鼠标悬浮小球立体光照邻近反应交互效果代码

代码语言：html

所属分类：动画

代码描述：css实现鼠标悬浮小球立体光照邻近反应交互效果代码

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

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

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


  
  
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #012;
}

:root {
  --ball-size: 42;
  --impect-radius: 192;
}

.baseLight {
  position: fixed;
  inset: calc(50% - (var(--ball-size) * 6px));
  background-image: radial-gradient(closest-side, #fff, 2%, transparent);
  transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px));
}

.shadows, .balls {
  position: fixed;
  inset: 50%;

  div {
    position: absolute;

    --x: calc(cos(var(--i) / 6 * pi) * 3);
    --y: calc(sin(var(--i) / 6 * pi) * 3);
    --hue: calc((var(--x) + var(--y)) * 4);

    --dx: calc(var(--x) * var(--ball-size) - var(--mx, -9999));
    --dy: calc(var(--y) * var(--ball-size) - var(--my, -9999));
    --.........完整代码请登录后点击上方下载按钮下载查看