使用 HTML 和 CSS 打开或关闭灯泡(1)

📌 相关文章

📜 使用 HTML 和 CSS 打开或关闭灯泡(1)

📅 最后修改于: 2023-12-03 15:22:11.992000 🧑 作者: Mango

使用 HTML 和 CSS 打开或关闭灯泡

在本文中，我们将介绍如何使用 HTML 和 CSS 来打开或关闭灯泡。

HTML

首先，我们需要一个 HTML 文件，其中包含一个灯泡和一个开关按钮。以下是示例代码：

<!DOCTYPE html>
<html>

<head>
  <title>灯泡示例</title>
</head>

<body>
  <h1>使用 HTML 和 CSS 打开或关闭灯泡</h1>
  <div class="lamp-container">
    <div class="lamp"></div>
  </div>
  <button>开关</button>
</body>

</html>

在上面的代码中，我们使用了 <div> 元素来创建一个灯泡。<button> 元素用于开关灯泡。

CSS

现在，我们需要编写 CSS 样式来控制灯泡的打开和关闭。使用 :before 伪元素，我们可以在灯泡上创建一个圆形阴影效果。以下是样式示例代码：

.lamp-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.lamp {
  width: 100px;
  height: 100px;
  background-color: #000000;
  border-radius: 50%;
}

.lamp:before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0px 0px 50px 20px #ffffff;
}

.lamp.on {
  background-color: #ffd700;
}

.lamp.on:before {
  box-shadow: 0px 0px 50px 20px #ffd700;
}

在上面的代码中，我们为灯泡容器设置了 position: relative，这样我们可以在灯泡上使用绝对定位来设置伪元素。我们还为灯泡元素设置了一个黑色背景和圆角。在伪元素中，我们为其设置了一个白色圆形阴影效果。

我们还为打开的灯泡设置了黄色的背景，并在伪元素上创建了一个相同的黄色效果。

JavaScript

最后，我们需要编写 JavaScript 来处理开关按钮的点击事件。以下是示例代码：

var lamp = document.querySelector('.lamp');
var btn = document.querySelector('button');

btn.addEventListener('click', function() {
  lamp.classList.toggle('on');
});

在上面的代码中，我们获取灯泡元素和开关按钮元素。然后，我们为按钮添加了一个点击事件监听器。每次单击按钮时，我们将CSS类 .on 添加到或从灯泡元素中删除。这会触发灯泡的打开或关闭效果。

结论

现在，我们已经学习了如何使用 HTML、CSS 和 JavaScript 来打开或关闭灯泡。有趣的是，你可以在 CSS 样式中尝试使用其他效果，例如渐变或动画，以获得更出色的视觉效果。希望这篇文章对你有所帮助！