页面的head部分，需设置好灯泡点亮和熄灭时的不同样式，还有提示文字的发光样式等，部分代码如下：

html, body {
        font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
        font-style: bold;
        font-size: 4.8vmin;
        line-height: 4.8vmin;
        color: rgba(255,238,188,0.8);
        margin: 0;
        padding: 0;
        height: 100%;
        background: rgba(66,39,71,1);
        background: -moz-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(66,39,71,1)), color-stop(73%, rgba(43,25,46,1)), color-stop(100%, rgba(19,11,20,1)));
        background: -webkit-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
        background: -o-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
        background: -ms-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
        background: linear-gradient(to bottom, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
    }
    a {
        color: rgba(255,238,188,0.8);
    }
    #lampadario {
        position: fixed;
        left: 50%;
        top: 0;
    }
    #filo {
        position: relative;
        background-color: #000000;
        width: 2px;
        height: 150px;
        left: 50%;
        margin-left: -1px;
        z-index: 1;
        -webkit-transform-origin: 0% 0%;
           -moz-transform-origin: 0% 0%;
            -ms-transform-origin: 0% 0%;
             -o-transform-origin: 0% 0%;
                transform-origin: 0% 0%;
        -webkit-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
           -moz-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
            -ms-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
             -o-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
                animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
    }
    #filo:after {
        content: " ";
        left: -5px;
        top: 100%;
        position: absolute;
        border-bottom: 15px solid #000000;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        height: 0;
        width: 4px;
    }
    #lampadina {
        position:relative;
    }
    input[value="off"]:checked ~
    #filo {
        -webkit-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
           -moz-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
            -ms-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
             -o-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
                box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
    }
    input[value="off"]:checked ~
    #filo:after {
        -webkit-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
           -moz-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
            -ms-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
             -o-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
                box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
    }
    
    input {
        position: absolute;
        width: 90px;
        height: 70px;
        top: 150px;
        margin-left:-45px;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }
    
    input[value="on"] {
        top: 150px;
    }
    input[value="off"] {
        top: -100px;
    }
    input[value="on"]:checked {
        top: -100px;
    }
    input[value="on"]:checked + input[value="off"] {
        top: 150px;
    }
    
    label {
        width: 51px;
        height: 51px;
        top: 164px;
        position: absolute;
        left: 0;
        margin-left: -24px;
        -webkit-border-radius: 100%;
           -moz-border-radius: 100%;
            -ms-border-radius: 100%;
             -o-border-radius: 100%;
                border-radius: 100%;
        -webkit-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
           -moz-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
            -ms-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
             -o-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
                animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
    }           
    input[value="off"]:checked ~
    label {
        background: rgba(255,255,255,0.03);
        -webkit-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
           -moz-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
            -ms-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
             -o-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
                box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
    }
    input[value="on"]:checked ~
    label {
        background: rgba(255,238,188,1);
        -webkit-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
           -moz-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
            -ms-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
             -o-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
                box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
    }

页面的body部分，分别用了两个input radio来控制灯泡的不同状态，点亮时的文字放在div容器里，代码如下：

<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>