<!-- * Gears made with just CSS. * @author: Adrán Gómez Llorente * @website: http://adgllorente.com --> <span class="gear"> <span class="body"></span> <span class="tooth"></span> <span class="tooth rotate-45"></span> <span class="tooth rotate-90"></span> <span class="tooth rotate-135"></span> <span class="hole"></span> </span> <span class="gear"> <span class="body"></span> <span class="tooth"></span> <span class="tooth rotate-45"></span> <span class="tooth rotate-90"></span> <span class="tooth rotate-135"></span> <span class="hole"></span> </span> <span class="gear"> <span class="body"></span> <span class="tooth"></span> <span class="tooth rotate-45"></span> <span class="tooth rotate-90"></span> <span class="tooth rotate-135"></span> <span class="hole"></span> </span> <span class="gear"> <span class="body"></span> <span class="tooth"></span> <span class="tooth rotate-45"></span> <span class="tooth rotate-90"></span> <span class="tooth rotate-135"></span> <span class="hole"></span> </span>
/** * Gears made with just CSS. * @author: Adrán Gómez Llorente * @website: http://adgllorente.com */ html, body { height: 100%; } body { display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: #490A3D; margin: 0; flex-wrap: wrap; } .gear { margin: 20px; &:nth-of-type(1) { .make-gear(24px, 'clockwise', #bd1550, #490a3d); } &:nth-of-type(2) { .make-gear(100px, 'reverse', #e97f02, #490a3d); } &:nth-of-type(3) { .make-gear(50px, 'clockwise', #f8ca00, #490a3d); } &:nth-of-type(4) { .make-gear(200px, 'reverse', #8a9b0f, #490a3d); } } // Mixin to create a gear. .make-gear(@size, @direction: 'clockwise', @color: black, @bg: white) { @tooth-size: @size / 12; @tooth-width: @size / 6; @hole-size: @size / 2; animation: @direction 2.0s infinite linear; display: inline-block; width: @size; height: @size; > .body { position: absolute; background-color: @color; width: @size - @tooth-size * 2; height: @size - @tooth-size * 2; border-radius: 50%; top: @tooth-size; left: @tooth-size; } > .hole { position: absolute; top: (@size - @hole-size) / 2; left: (@size - @hole-size) / 2; background-color: @bg; width: @hole-size; height: @hole-size; border-radius: 50%; } > .tooth { position: absolute; left: (@size - @tooth-width) / 2; width: @tooth-width; height: @size; background-color: @color; &.rotate-45 { transform: rotate(45deg); } &.rotate-90 { transform: rotate(90deg); } &.rotate-135 { transform: rotate(135deg); } } // Rotatin mixin @keyframes "clockwise" { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } // Rotation reverse mixin @keyframes "reverse" { from { transform: rotate(359deg); } to { transform: rotate(0deg); } } }