CSS3 SVG 3D 3차원 그림자 텍스트 애니메이션 특수 효과

CSS3 사용자 정의 체크박스 스타일을 통해 구현된 CSS3 3차원 전등 스위치 버튼 애니메이션 효과는 스위치를 전환하면 페이지의 배경색을 변경하여 조명 켜기 및 끄기를 시뮬레이션할 수 있습니다.

   <정의>
        <filter id="드롭-스트로크-섀도">
          <fegaussianblur in="SourceAlpha" stddeviation="10"></fegaussianblur>
        </필터>
        <기호 id="스트로크">
          <text x="50%" y="67%" fill="none" 스트로크-너비=".035em" 스트로크-라인캡="라운드" 스트로크-라인조인="라운드" 페인트-주문="획 채우기" text-anchor="middle">음영 처리됨</text>
        </기호>
        <symbol id="채우기">
          <text x="50%" y="60%" text-anchor="middle">음영 처리</text>
        </기호>
      </defs>
      <g class="svg-text__shaded__스트로크" 스트로크="#00cccc">
        <use y="5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Stroke" opacity="0.5" filter="url(#drop-Stroke -그림자)"></사용>
        <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="#뇌졸중" 스트로크="청록색"></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>