首页 前端知识 CSS实现开灯关灯的效果

CSS实现开灯关灯的效果

2024-02-09 20:02:42 前端知识 前端哥 259 382 我要收藏

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
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1586.html
标签
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!