HTML/CSS 魔法第二弹：会逃跑的调皮按钮（悬停自动闪避）-CSDN博客

本文链接：https://blog.csdn.net/2301_76277481/article/details/147674894

引言

在网页设计中，交互性是吸引用户的关键因素之一。普通的按钮在用户悬停时可能只是颜色或样式发生改变，但今天我们要创造一个 “调皮” 的按钮，当用户鼠标悬停在上面时，它会自动闪避，仿佛在和用户玩游戏。本文将详细介绍如何使用 HTML 和 CSS 实现这个有趣的效果。

实现思路

要实现会逃跑的调皮按钮，我们的核心思路是利用 CSS 的 position 属性和 transform 属性，结合 JavaScript 监听鼠标事件。当鼠标悬停在按钮上时，通过 JavaScript 动态改变按钮的位置，从而实现按钮的闪避效果。

代码实现步骤

1. HTML 结构搭建

首先，我们需要创建一个基本的 HTML 结构，包含一个按钮元素。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会逃跑的调皮按钮</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <button id="naughty-button">来抓我呀！</button>
    <script src="script.js"></script>
</body>

</html>

在这段 HTML 代码中：

<!DOCTYPE html> 声明文档类型为 HTML5。
<meta> 标签设置字符编码和视口，确保页面在不同设备上正确显示。
<title> 标签设置页面标题。
<link> 标签引入外部的 CSS 文件 styles.css，用于样式设置。
<button> 标签创建了一个按钮，其 id 为 naughty-button，方便后续在 CSS 和 JavaScript 中引用。
<script> 标签引入外部的 JavaScript 文件 script.js，用于实现按钮的闪避逻辑。

2. CSS 样式设计

接下来，我们使用 CSS 为按钮设置基本样式，并将其定位在页面中心。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#naughty-button {
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

在这段 CSS 代码中：

body 元素使用 Flexbox 布局，将内容在水平和垂直方向上居中显示，同时设置背景颜色。
#naughty-button 选择器针对按钮进行样式设置：
- padding 设置按钮内边距。
- font-size 设置字体大小。
- border 去除边框。
- border-radius 设置圆角。
- background-color 和 color 设置背景色和文字颜色。
- cursor 设置鼠标指针样式为手型。
- position: relative 使按钮可以相对于其正常位置进行定位。
- transition 为按钮的 transform 属性添加过渡效果，使按钮移动更加平滑。

3. JavaScript 实现闪避逻辑

最后，我们使用 JavaScript 监听鼠标悬停事件，并在鼠标悬停时随机改变按钮的位置。

const naughtyButton = document.getElementById('naughty-button');

naughtyButton.addEventListener('mouseover', () => {
    const maxX = window.innerWidth - naughtyButton.offsetWidth;
    const maxY = window.innerHeight - naughtyButton.offsetHeight;

    const randomX = Math.random() * maxX;
    const randomY = Math.random() * maxY;

    naughtyButton.style.transform = `translate(${randomX}px, ${randomY}px)`;
});

在这段 JavaScript 代码中：

const naughtyButton = document.getElementById('naughty-button'); 获取按钮元素。
naughtyButton.addEventListener('mouseover', () => { ... }); 监听按钮的鼠标悬停事件。
在事件处理函数中，计算按钮在页面内可移动的最大 X 和 Y 坐标。
Math.random() 生成随机数，结合最大坐标，得到随机的 X 和 Y 位置。
naughtyButton.style.transform = translate(${randomX}px, ${randomY}px); 使用 transform 属性将按钮移动到随机位置。

完整代码

HTML 代码（index.html）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会逃跑的调皮按钮</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <button id="naughty-button">来抓我呀！</button>
    <script src="script.js"></script>
</body>

</html>

CSS 代码（styles.css）

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#naughty-button {
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

JavaScript 代码（script.js）

const naughtyButton = document.getElementById('naughty-button');

naughtyButton.addEventListener('mouseover', () => {
    const maxX = window.innerWidth - naughtyButton.offsetWidth;
    const maxY = window.innerHeight - naughtyButton.offsetHeight;

    const randomX = Math.random() * maxX;
    const randomY = Math.random() * maxY;

    naughtyButton.style.transform = `translate(${randomX}px, ${randomY}px)`;
});