小眼睛跟随鼠标移动

遇见~未来

已于 2025-01-19 17:21:40 修改

阅读量415

点赞数 4

分类专栏：网页小练习文章标签： css css3 html

于 2025-01-16 09:24:03 首次发布

本文链接：https://blog.csdn.net/2301_76428778/article/details/145173438

版权

网页小练习专栏收录该内容

3 篇文章

订阅专栏

效果图：

小眼睛跟随鼠标移动

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 对所有元素进行样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 设置 body 的样式 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: radial-gradient(#33bbff, #1144ff);
        }
        /* 对类名为 main 的元素进行样式设置 */
      .main {
            display: flex;
            gap: 7vmin;
        }
        /* 对类名为 main_eye 的元素进行样式设置 */
      .main_eye {
            width: 25vmin;
            height: 25vmin;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 4vmin rgba(0, 0, 0,.2),
                        inset 0 0 2vmin #33bbff,
                        inset 0 0 4vmin #33bbff;
            position: relative;
        }
        /* 为类名为 main_eye 的元素添加伪元素，并设置其样式 */
      .main_eye:before {
            content: '';
            width: 40%;
            height: 40%;
            background-color: #333;
            border-radius: 50%;
            border: 1vmin solid #33bbff;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 30%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="main_eye"></div>
        <div class="main_eye"></div>
    </div>
    <script>
        // 选择所有类名为 main_eye 的元素
        let eyes = document.querySelectorAll('.main_eye');

        // 为 body 元素添加鼠标移动事件监听器
        document.querySelector('body').addEventListener('mousemove', (e) => {
            // 遍历每个 main_eye 元素
            eyes.forEach(eye => {
                // 获取元素相对于视口的位置信息
                let rect = eye.getBoundingClientRect();
                // 计算元素中心的 x 坐标
                let x = rect.left + rect.width / 2;
                // 计算元素中心的 y 坐标
                let y = rect.top + rect.height / 2;
                // 计算鼠标相对于元素中心的角度
                let deg = Math.atan2(e.clientY - y, e.clientX - x) * 180 / Math.PI+180;
                // 根据计算的角度旋转元素
                eye.style.transform = `rotate(${deg}deg)`; 
            });
        });
    </script>
</body>
</html>

HTML 部分：
- 定义文档基本结构，涵盖文档类型、语言、元信息、标题、样式及脚本。
- 包含一个 div 容器 .main，其中有两个 .main_eye 元素，用于表示眼睛。
CSS 部分：
- * {...}：将所有元素的 margin、padding 设为 0 并采用 border - box 盒模型，便于布局计算。
- body {...}：将页面主体设为 Flex 布局，使内容居中并设置背景渐变。
- .main {...}：为 .main 容器设置 Flex 布局与元素间距。
- .main_eye {...}：定义眼睛元素的形状、大小、颜色、阴影及定位。
- .main_eye:before {...}：为眼睛元素添加伪元素表示瞳孔，设置其大小、颜色、位置及定位。
JavaScript 部分：
- let eyes = document.querySelectorAll('.main_eye')：选择所有类名为 main_eye 的元素。
- document.querySelector('body').addEventListener('mousemove', (e) => {...})：为 body 元素添加鼠标移动事件监听器。
- let rect = eye.getBoundingClientRect()：获取元素的位置和尺寸信息。
- let x = rect.left + rect.width / 2 和 let y = rect.top + rect.height / 2：计算元素中心坐标。
- let deg = Math.atan2(e.clientY - y, e.clientX - x) * 180 / Math.PI + 180：计算鼠标相对于元素中心的角度并转换为度。