Dribbble Animation

HTML
<div class="wrapper"> <div class="layer-1"></div> <div class="layer-2"></div> <div class="layer-3"></div> <i class="fa fa-dribbble dribbble-logo"></i> </div>
CSS
html, body { margin: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #333333; } .wrapper { position: relative; height: 220px; width: 220px; margin-right: 20px; } .layer-1, .layer-2, .layer-3 { height: 220px; width: 220px; position: absolute; top: 50%; left: 50%; margin: -110px 0 0 -110px; border-radius: 50%; animation: 8s linear infinite; } .dribbble-logo { position: absolute; top: 20%; left: 25%; font-size: 140px; color: #fff; } .layer-1 { background-color: rgba(0, 182, 227, 0.9); animation-name: rotate-1; } .layer-2 { background-color: rgba(138, 186, 86, 0.9); animation-name: rotate-3; } .layer-3 { background-color: rgba(234, 76, 137, 0.9); animation-name: rotate-2; } @keyframes rotate-1 { 0% { transform-origin: 40%; transform: rotate(0deg); } 70%, 100% { transform-origin: 60%; transform: rotate(360deg); } } @keyframes rotate-2 { 0% { transform-origin: 40%; transform: rotate(0deg); } 80%, 100% { transform-origin: 60%; transform: rotate(360deg); } } @keyframes rotate-3 { 0% { transform-origin: 40%; transform: rotate(0deg); } 100% { transform-origin: 60%; transform: rotate(360deg); } }
JAVASCRIPT
Expand for more options Login