CSS3 SVG 3D立体阴影文字动画特效

通过CSS3自定义checkbox样式来实现的一款CSS3立体感灯光开关按钮动画特效，切换开关可以改变页面背景颜色，从而模拟灯光的开启和关闭。

   <defs>
        <filter id="drop-stroke-shadow">
          <fegaussianblur in="SourceAlpha" stddeviation="10"></fegaussianblur>
        </filter>
        <symbol id="stroke">
          <text x="50%" y="67%" fill="none" stroke-width=".035em" stroke-linecap="round" stroke-linejoin="round" paint-order="stroke fill" text-anchor="middle">Shaded</text>
        </symbol>
        <symbol id="fill">
          <text x="50%" y="60%" text-anchor="middle">Shaded</text>
        </symbol>
      </defs>
      <g class="svg-text__shaded__stroke" stroke="#00cccc">
        <use y="5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke" opacity="0.5" filter="url(#drop-stroke-shadow)"></use>
        <use y="3%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke"></use>
        <use y="2%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke"></use>
        <use y="1%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke"></use>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke" stroke="cyan"></use>
      </g>
      <g fill="#e6e6e6">
        <use class="svg-text__shaded" y="7%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <use y="6.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <use y="6%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <use y="5.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <use y="5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <use y="4.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <use y="4%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <use y="3.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill" fill="white"></use>
      </g>