CSS实现开灯关灯的效果

最新推荐文章于 2024-04-26 17:50:52 发布

Fantasy嘿

最新推荐文章于 2024-04-26 17:50:52 发布

阅读量746

点赞数

分类专栏：学习文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_50794535/article/details/127792757

版权

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