Do Amazing Things

HTML
<div class="words words-1"> <span>D</span> <span>O</span> </div> <div class="words words-1"> <span>A</span> <span>M</span> <span>A</span> <span>Z</span> <span>I</span> <span>N</span> <span>G</span> </div> <div class="words words-1"> <span>T</span> <span>H</span> <span>I</span> <span>N</span> <span>G</span> <span>S</span> </div>
SCSS
@import 'https://fonts.googleapis.com/css?family=Rubik+Mono+One'; html, body { height: 100%; width: 100%; margin: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #f1c40f; overflow: hidden; font-family: 'Rubik Mono One', sans-serif; } .words { color: #f1c40f; font-size: 0; line-height: 1; span { font-size: 120px; display: inline-block; animation: move 2s ease-in-out infinite; &:nth-child(2) { animation-delay: 0.5s; } &:nth-child(3) { animation-delay: 1.0s; } &:nth-child(4) { animation-delay: 1.5s; } } } @keyframes move { 0% { transform: translate(-33%, 0);} 50% { text-shadow: 0 15px 40px rgba(black, 0.6); } 100% { transform: translate(33%, 0); } }
JAVASCRIPT
Expand for more options Login