A Pen by Alex Reynish on CodePen.
Created
June 29, 2021 11:36
-
-
Save reynish/fafd62b593488f3cdc0308ecb889fa7e to your computer and use it in GitHub Desktop.
rLQNVZ
This file contains 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
| .sq.sq-main | |
| .sq-inner.sq_red | |
| .sq-inner.sq_green | |
| .sq-inner.sq_blue |
This file contains 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
| @mixin move($duration: 2s, $delay: 0s) { | |
| animation: move $duration infinite; | |
| animation-delay: $delay; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| height: 100%; | |
| background: black; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .sq { | |
| &-main, | |
| &-inner { | |
| $size: 200px; | |
| width: $size; | |
| height: $size; | |
| } | |
| &-main { | |
| position: relative; | |
| } | |
| &-inner { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| mix-blend-mode: lighten; | |
| animation-name: move; | |
| } | |
| &_red { | |
| @include move(5s, 0s); | |
| background: #F00; | |
| } | |
| &_green { | |
| @include move(5s, .25s); | |
| background: #0F0; | |
| } | |
| &_blue { | |
| @include move(5s, .5s); | |
| background: #00F; | |
| } | |
| } | |
| @keyframes move { | |
| 0%, 25%, 100% { | |
| transform: translate(-25%,-10%); | |
| } | |
| 50%, 75% { | |
| transform: translate(25%,10%); | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment