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

代码语言:html

所属分类:其他

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

代码标签: 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(.........完整代码请登录后点击上方下载按钮下载查看

网友评论0