| <div class="hourglass"></div> |
| <div class="clock"> | |
| <span class="cog hours tens" data-splitting>0123456789</span> | |
| <span class="cog hours" data-splitting>0123456789</span> | |
| <span class="colon">:</span> | |
| <span class="cog minutes tens" data-splitting>0123456789</span> | |
| <span class="cog minutes" data-splitting>0123456789</span> | |
| <span class="colon">:</span> | |
| <span class="cog seconds tens" data-splitting>0123456789</span> | |
| <span class="cog seconds" data-splitting>0123456789</span> |
| const STATES = { | |
| AUTHENTICATING: 'AUTHENTICATING', | |
| AUTHORIZED: 'AUTHORIZED', | |
| UNAUTHORIZED: 'UNAUTHORIZED', | |
| STORAGE_FULL: 'STORAGE_FULL', | |
| ERROR: 'ERROR' | |
| }; | |
| const EVENTS = { | |
| AUTHENTICATED: 'AUTHENTICATED', |
| h1 hello world | |
| div what's up? |
David Khourshid and Stephen Shaw work with the hot-off-the-press backdrop-filter support in Chrome to create a blinds-like loader effect
Skip around:
| <a href="https://youtu.be/Obj0-fID7Yc" target="_blank" data-keyframers-credit style="color: #FFF"></a> | |
| <script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script> | |
| <div id="app" data-state="1"> | |
| <div class="bg main-bg" data-flip-key="main-bg" data-scene="2"></div> | |
| <div class="bg articles-bg" data-flip-key="main-bg" data-scene="1"></div> | |
| <h1 class="logo">@keyframers</h1> | |
| <form class="search"> |
Watch interactive video on Scrimba: https://scrimba.com/p/pEgDAM/cVB48Ur
A 3D (looking) clock made with CSS gradients and borders.
A Pen by Cassidy Williams on CodePen.
David Khourshid and Stephen Shaw round up to make this circular image transition using CSS masks, some fancy text effects and mouse position tracking with CSS variables.
Skip around:
A Pen by Richard Gil on CodePen.