css实现鼠标悬浮小球立体光照邻近反应交互效果代码
代码语言:html
所属分类:动画
代码描述:css实现鼠标悬浮小球立体光照邻近反应交互效果代码
代码标签: 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)); --.........完整代码请登录后点击上方下载按钮下载查看
网友评论0