Blend Mode Experiment #1

HTML
<div class="wrapper"> <div class="square square-1"></div> <div class="square square-2"></div> <div class="square square-3"></div> <div class="square square-4"></div> <div class="square square-5"></div> <div class="square square-6"></div> </div>
SCSS
body { display: flex; position: absolute; width: 100%; height: 100%; justify-content: center; align-items: center; background-color: #ecf0f1; } .wrapper { position: relative; top: -75px; left: -75px; } .square { position: absolute; width: 150px; height: 150px; mix-blend-mode: multiply; opacity: 0.9; transform: rotate(45deg); &.square-1 { background-color: #1abc9c; animation: move1 5s ease-in-out infinite; } &.square-2 { background-color: #2ecc71; } &.square-3 { background-color: #3498db; animation: move2 5s ease-in-out infinite; } &.square-4 { background-color: #9b59b6; animation: move3 5s ease-in-out infinite; } &.square-5 { background-color: #f1c40f; animation: move4 5s ease-in-out infinite; } &.square-6 { background-color: #e74c3c; animation: move5 5s ease-in-out infinite; } } @keyframes move1 { 0% { left: 0px; } 25% { left: -50px; } 50% { left: 0px; } 75% { left: 50px; } 100% { left: 0px; } } @keyframes move2 { 0% { left: 0px; } 25% { left: -25px; } 50% { left: 0px; } 75% { left: 25px; } 100% { left: 0; } } @keyframes move3 { 0% { left: 0px; } 25% { left: 25px; } 50% { left: 0px; } 75% { left: -25px; } 100% { left: 0px; } } @keyframes move4 { 0% { left: 0px; } 25% { left: 50px; } 50% { left: 0px; } 75% { left: -50px; } 100% { left: 0px; } } @keyframes move5 { 0% { left: 0px; } 25% { left: 75px; } 50% { left: 0; } 75% { left: -75px; } 100% { left: 0px; } }
JAVASCRIPT
Expand for more options Login