Created
August 19, 2018 13:33
-
-
Save LeetCodes/ac01fad62443e5d81329972d8a7821fa to your computer and use it in GitHub Desktop.
卐.zone SVG Logo Animation with CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| viewBox="0 90 612 612" style="enable-background:new 0 90 612 612;" xml:space="preserve"> | |
| <g> | |
| <path class="path border" d="M607.8,94.2V697.8H4.2V94.2H607.8M612,90H0V702H612V90h0Z" /> | |
| </g> | |
| <g> | |
| <g> | |
| <path class="path letter1" d="M330.3,102.61L234,198.91l70.71,70.71,89.42-89.42,119,119-22.63,22.63-97.4-97.4-66.79,66.79,91.48,91.48L298.3,502.22l-21-21L375,383.45,304.56,313l-91.22,91.22L94,284.82l22.24-22.24L214,360.35l69-69-92-92L309.08,81.3l21.26,21.26Z" transform="translate(0 90)" /> | |
| </g> | |
| </g> | |
| </svg> | |
| <div class="shine"></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // var path = document.querySelector('.letter2'), | |
| // leng = path.getTotalLength(); | |
| // console.log(leng); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #505050; | |
| } | |
| .container { | |
| overflow: hidden; | |
| position: relative; | |
| width: 250px; | |
| height: 250px; | |
| margin: 40px auto 0; | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .path { | |
| stroke: #FBFBFB; | |
| fill: #FBFBFB; | |
| fill-opacity:0; | |
| } | |
| .border { | |
| stroke-dasharray: 4900; | |
| stroke-dashoffset: 4900; | |
| animation: anim1 1.5s linear 1s forwards, anim4 1s linear 3s forwards; | |
| } | |
| @keyframes anim1 { | |
| 0% { | |
| stroke-dashoffset: 4900; | |
| } | |
| 100% { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .letter1 { | |
| stroke-dasharray: 2253; | |
| stroke-dashoffset: 2253; | |
| animation: anim2 0.7s linear 2s forwards, anim4 1s linear 3s forwards; | |
| } | |
| @keyframes anim2 { | |
| 0% { | |
| stroke-dashoffset: 2253; | |
| } | |
| 100% { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .letter2 { | |
| stroke-dasharray: 967; | |
| stroke-dashoffset: 967; | |
| animation: anim3 0.7s linear 2s forwards, anim4 1s linear 3s forwards; | |
| } | |
| @keyframes anim3 { | |
| 0% { | |
| stroke-dashoffset: 910; | |
| } | |
| 100% { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes anim4 { | |
| 0% { | |
| fill-opacity: 0; | |
| } | |
| 100% { | |
| fill-opacity: 1; | |
| } | |
| } | |
| .shine { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 0; | |
| height: 100%; | |
| animation: anim5 0.4s linear 3.8s forwards; | |
| } | |
| @keyframes anim5 { | |
| 0% { | |
| background: rgba(255,255,255,0.4); | |
| width: 0; | |
| } | |
| 100% { | |
| background: rgba(255,255,255,0); | |
| width: 200%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment