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