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

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

   <定义>
        <过滤器 id="drop-lines-shadow">
          <fegaussianblur in="SourceAlpha" stddeviation="10"></fegaussianblur>
        </过滤器>
        <符号 id="笔划">
          <文本 x="50%" y="67%" fill="无" 描边宽度=".035em" 描边线帽="圆形" 描边线连接="圆形" 绘画顺序="描边填充" text-anchor="middle">阴影
        </符号>
        <符号 id="填充">
          阴影
        </符号>
      </defs>
      <g 类=“svg-text__shaded__中风”笔画=“#00cccc”>
        <使用 y="5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#行程" opacity="0.5" 过滤器="url(#drop-中风-shadow)"></use>
        <使用 y="3%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#中风"></use>
        <使用 y="2%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#中风"></use>
        <使用 y="1%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#中风"></use>
        <使用 xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#中风" 笔划="青色">
      </g>
      <g fill="#e6e6e6">
        <使用 class="svg-text__shaded" y="7%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
        <使用 y="6.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill">
        <使用 y="6%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill">
        <使用 y="5.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill">
        <使用 y="5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill">
        <使用 y="4.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill">
        <使用 y="4%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill">
        <使用 y="3.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill" fill="white"></use>
      </g>