CSS实现开灯关灯的效果

最新推荐文章于 2025-06-16 08:52:26 发布

原创

最新推荐文章于 2025-06-16 08:52:26 发布 · 891 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

这篇博客介绍了如何使用CSS实现一个简单的开关灯效果。通过HTML文件和CSS文件(index.css)的配合，点击灯泡元素可以实现灯亮和熄灭的状态切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS实现开灯关灯的效果

1. html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="lampadario">
      <input type="radio" name="switch" value="on" />
      <input type="radio" name="switch" value="off" checked="checked" />
      <label for="switch"></label>
      <div id="filo"></div>
      <div id="lampadina">
        <div id="sorpresa">
          <div id="footer">一键三连！！！</div>
          <div id="shadow">一键三连！！！</div>
        </div>
      </div>
    </div>
  </body>
</html>

2. css文件(index.css)

html,
body {
   
   
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 4.2vmin;
  line-height: 4.7vmin;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  padding: 0;
  height: 100%;
  background: #422747;
  background: -webkit-gradient(left top, left bottom, color-stop(0%