跟随鼠标移动的背景

跟随鼠标移动的背景

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

以下代码为本人填写，转载请注明教程地址和本贴地址

html

    <div id='container'>
        <div class='content'>
            <h2>404</h2>
            <h4>Opps! Page not found</h4>
            <p>
                2013年，404 Not Found成为中国大陆的网络热词。在中国，404被大部分网民普遍用作网站被防火长城屏蔽的代名词。而事实上，由于防火长城一般的封锁方法是向连接两端的计算机发送RST（Reset）数据包干扰两者间正常的TCP连接，被防火长城屏蔽的网站无法回复任何HTTP状态码，最常见的错误信息是“连接已被重置”。
            </p>
            <a href="#">
                Back To Home
            </a>
        </div>
    </div>

CSS

*{
  margin: 0; /*外边距*/
  padding: 0; /*内边距*/
  box-sizing: border-box; /*盒子大小规则*/
  font-family: sans-serif; /*字体:非衬线*/
}
body{
  background: linear-gradient(45deg, #8500ff, #5acaff); /*背景颜色渐变*/
  height: 100vh; /*高度：100视窗*/
}
#container{
  position: absolute; /*绝对定位*/
  top: 10%; /*距上部*/
  left: 10%;
  right: 10%;
  bottom: 10%;
  border-radius: 10px; /*圆角边框*/
  display: flex; /*弹性盒模型*/
  justify-content: center; /*主轴对齐方式*/
  align-items: center; /*交叉轴对齐方式*/
  background: url('../img/bg.png'), #151729; /*背景图片，颜色*/
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /*背景阴影*/
}
#container .content{ 
  max-width: 600px; /*最大宽度*/
  text-align: center; /*字体行居中*/
}
#container .content h2{
  font-size: 18vw; /*字体大小*/
  color: #fff;
  line-height: 1em; /*行高*/
}
#container .content h4{
  position: relative;
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #111;
  background: #fff;
  font-weight: 300;
  padding: 10px 20px;
  display: inline-block; /*行内盒模型*/
}
#container .content p{
  color: #fff;
  font-size: 1.2em;
}
#container .content a{
  position: relative;
  display: inline-block;
  padding: 10px 25px;
  background: #ff0562;
  color: #fff;
  text-decoration: none;
  margin-top: 25px;
  border-radius: 25px;
  border-bottom: 4px solid #d00d56; /*下边框*/
  user-select: none;
}

JS

        // 根据id获取元素
        const container = document.getElementById('container');
        // 窗口的鼠标移动事件,传入event对象
        window.onmousemove = function(e) {
            // 返回被触发时的鼠标X，Y位置
            let x = e.clientX / 5 
                y = e.clientY / 5;
            // 将容器的背景图片定位进行修改
            container.style.backgroundPositionX = x + 'px';
            container.style.backgroundPositionY = y + 'px';
        }

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）