#Codevember 6 - Focus

HTML
<div class="focus"> <div class="focus--mask"> <div class="focus--mask-inner">Focus</div> </div> </div>
SCSS
$componentSize: 179px; $maskSize: 50px; $speed: 1s; $borderOffset: 8px; $backgroundColor: tomato; $animationProps: $speed linear infinite alternate; @keyframes mask-move { 0% { transform: translateX(0); } 100% { transform: translateX($componentSize - $maskSize); } } @keyframes mask-inner-move { 0% { transform: translateX(0); } 100% { transform: translateX(-($componentSize - $maskSize)); } } *, *:before, *:after { box-sizing: border-box; } body, html { height: 100%; } body { padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; background: $backgroundColor; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } .focus { font-size: 3rem; text-transform: uppercase; color: white; letter-spacing: .2rem; line-height: 1; position: relative; width: $componentSize; &:before { content: 'Focus'; filter: blur(3px); } &:after { content: ''; position: absolute; width: $maskSize; height: $maskSize; top: -($borderOffset / 2); left: 0; border-radius: 50%; border: 1px solid #fff; animation: mask-move $animationProps; } &--mask { overflow: hidden; position: absolute; width: $maskSize; border-radius: 50%; height: 100%; top: 0; left: 0; background: $backgroundColor; animation: mask-move $animationProps; &-inner { animation: mask-inner-move $animationProps; } } } .credits { color: white; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-weight: 200; letter-spacing: 0.05rem; font-style: italic; text-align: center; a { color: white; text-decoration: none; font-weight: normal; &:hover { text-decoration: underline; } } }
JAVASCRIPT
Expand for more options Login