js实现鼠标跟随移动水中捞月倒影效果代码-html代码-BFW代码库

js实现鼠标跟随移动水中捞月倒影效果代码

代码语言：html

所属分类：动画

代码描述：js实现鼠标跟随移动水中捞月倒影效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
        	cursor: grab;
          margin: 0;
        }
        
        #container {
        	width: 100vw;
        	height: 100vh;
        	background: rgb(1, 4, 0);
        	margin: 0 auto;
        	position: relative;
          overflow: hidden;
        }
        
        #container::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 0;
          width: 1px;
          height: 100%;
          background-color: #fff;
          box-shadow: 0 0 5px 1px #fff;
        }
        
        #flashlight,
        #flashlight-reflection {
        	width: 40px;
        	height: 40px;
        	background-color: rgba(255, 255, 255, 0.95);
        	position: absolute;
        	top: 50px;
        	left: 50px;
        	box-shadow: 0 0 20px 12px #fff;
        	border-radius: 50%;
        }
        
        #flashlight-reflection {
          left: auto;
          right: 50px;
          box-shadow: 0 0 20px 12px #EB7347;
        }
    </style>



</head>

<body>
    <!-- #CodePenChallenge: Reflections -->
    <.........完整代码请登录后点击上方下载按钮下载查看