A Pen by superman-enamy on CodePen.
Created
December 28, 2023 18:41
-
-
Save superman-enamy/cd843362aa4a995bcc8c5dfc4c7254a1 to your computer and use it in GitHub Desktop.
Coder splash screen
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="coder-logo-animation"> | |
| <div class="left"> | |
| <div class="part-1"></div> | |
| <div class="part-2"></div> | |
| <div class="part-3"></div> | |
| </div> | |
| <div class="right"> | |
| <div class="part-1"></div> | |
| <div class="part-2"></div> | |
| <div class="part-3"></div> | |
| </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
| @import "bourbon"; | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: #1b1b26; | |
| } | |
| .coder-logo-animation { | |
| position: relative; | |
| height: 190px; | |
| width: 250px; | |
| @include animation(coder-logo 2s infinite cubic-bezier(0.80, 0, 0.20, 1)); | |
| transform-origin: center center; | |
| } | |
| .left, .right { | |
| position: absolute; | |
| } | |
| .left { | |
| top: 115px; | |
| left: 26px; | |
| transform: rotate(-45deg); | |
| } | |
| .left div { | |
| position: absolute; | |
| background: #00aeef; | |
| width: 35px; | |
| height: 100px; | |
| } | |
| .left div:nth-child(2) { | |
| height: 125px; | |
| } | |
| .left .part-1 { | |
| @include animation(l-part-1 2s infinite cubic-bezier(0.80, 0, 0.20, 1)); | |
| } | |
| .left .part-2 { | |
| top: 1px; | |
| transform-origin: 0 0; | |
| transform: rotate(-90deg); | |
| @include animation(l-part-2 2s infinite cubic-bezier(0.80, 0, 0.20, 1)); | |
| } | |
| .left .part-3 { | |
| left: 90px; | |
| @include animation(l-part-3 2s infinite cubic-bezier(0.80, 0, 0.20, 1)); | |
| } | |
| .right { | |
| top: 94px; | |
| left: 68px; | |
| transform: rotate(-45deg); | |
| } | |
| .right div { | |
| position: absolute; | |
| background: #00aeef; | |
| width: 35px; | |
| height: 100px; | |
| } | |
| .right div:nth-child(2) { | |
| height: 125px; | |
| } | |
| .right .part-1 { | |
| @include animation(r-part-1 2s infinite cubic-bezier(0.80, 0, 0.20, 1)); | |
| } | |
| .right .part-2 { | |
| top: 129px; | |
| transform-origin: 0 0; | |
| transform: rotate(-90deg); | |
| @include animation(r-part-2 2s infinite cubic-bezier(0.80, 0, 0.20, 1)); | |
| } | |
| .right .part-3 { | |
| left: 90px; | |
| @include animation(r-part-3 2s infinite cubic-bezier(0.80, 0, 0.20, 1)); | |
| } | |
| @include keyframes(coder-logo) { | |
| 0% { transform: scale(1) rotate(0); } | |
| 20% { transform: scale(1) rotate(0); } | |
| 80% { transform: scale(1) rotate(360deg); } | |
| 100% { transform: scale(1) rotate(360deg); } | |
| } | |
| @include keyframes(l-part-1) { | |
| 0% { left: 0; } | |
| 20% { left: 0; } | |
| 50% { left: -15px; } | |
| 80% { left: 0; } | |
| 100% { left: 0; } | |
| } | |
| @include keyframes(l-part-2) { | |
| 0% { top: 5px; } | |
| 20% { top: 5px; } | |
| 50% { top: -14px; } | |
| 80% { top: 5px; } | |
| 100% { top: 5px; } | |
| } | |
| @include keyframes(l-part-3) { | |
| 0% { left: 90px; } | |
| 20% { left: 90px; } | |
| 50% { left: 94px; } | |
| 80% { left: 90px; } | |
| 100% { left: 90px; } | |
| } | |
| @include keyframes(r-part-1) { | |
| 0% { left: 0; } | |
| 20% { left: 0; } | |
| 50% { left: -4px; } | |
| 80% { left: 0; } | |
| 100% { left: 0; } | |
| } | |
| @include keyframes(r-part-2) { | |
| 0% { top: 130px; } | |
| 20% { top: 130px; } | |
| 50% { top: 144px; } | |
| 80% { top: 130px; } | |
| 100% { top: 130px; } | |
| } | |
| @include keyframes(r-part-3) { | |
| 0% { left: 90px; } | |
| 20% { left: 90px; } | |
| 50% { left: 105px; } | |
| 80% { left: 90px; } | |
| 100% { left: 90px; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment