Read Between The Lines

HTML
<div class="frame1"> </div> <div class="frame1"> </div> <div class="frame1"> </div> <div class="frame1"> </div> <div class="frame2"> </div> <div class="frame2"> </div> <div class="frame2"> </div> <div class="frame2"> </div> <article class="screen"> <h1 class="title">Read between the lines</h1> <div id="loader"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="loader2"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </article>
CSS
html { height: 100%; } body { background: -webkit-linear-gradient(#ABC4E6 , rgba(135, 60, 255, 0.0) 80%), -webkit-linear-gradient(-45deg, #969BD9 15%, #C3A8E9 75%); } @keyframes harlem { 0% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } 20% { transform: scale(1.03, 1); -webkit-transform: scale(1.03, 1); -moz-transform: scale(1.03, 1); -o-transform: scale(1.03, 1); -ms-transform: scale(1.03, 1); } 40% { transform: scale(0.97, 1); -webkit-transform: scale(0.97, 1); -moz-transform: scale(0.97, 1); -o-transform: scale(0.97, 1); -ms-transform: scale(0.97, 1); } 60% { transform: scale(1.01, 1); -webkit-transform: scale(1.01, 1); -moz-transform: scale(1.01, 1); -o-transform: scale(1.01, 1); -ms-transform: scale(1.01, 1); } 80% { transform: scale(0.99, 1); -webkit-transform: scale(0.99, 1); -moz-transform: scale(0.99, 1); -o-transform: scale(0.99, 1); -ms-transform: scale(0.99, 1); } 100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } } h1 { } h2 { margin: 0; padding: 0; font-size: 10px; line-height: 10px; letter-spacing: 2.5px; font-family: 'Open Sans'; font-weight: 700; color: #fff; } h3 { margin: 0; padding: 0; font-size: 11px; line-height: 11px; font-family: 'Open Sans'; font-weight: 400; color: #777; } h4 { margin: 0 0 5px 29px; padding: 0; font-size: 14px; line-height: 14px; font-family: 'Open Sans'; font-weight: 700; color: #fff; } h5 { margin: 0; padding: 0; font-size: 13px; line-height: 13px; font-family: 'Open Sans'; font-weight: 700; color: #6d6d6d; } h6 { margin: 0; padding: 0; font-size: 13px; line-height: 13px; font-family: 'Open Sans'; font-weight: 700; color: #f0f0f0; } .frame1 { height: 45px; background: white; width:200px; margin-top:45px; margin-left:505px; } .frame2 { height: 45px; background: white; width:400px; margin-top:45px; margin-left:1000px; } .screen { background-color: #6862A2; padding: 0; height: 650px; width: 500px; position: absolute; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); box-shadow: -20px 24px 125px rgba(0, 0, 0, 0.8); overflow: hidden; margin: 30px 0; background-image: radial-gradient( circle closest-side, #341b85, #160b39 ); } .title { font-family:'Heebo'; font-size:80px; margin-left:90px; margin-top:140px; background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #3366ff ), color-stop(0.15, #4775ff ), color-stop(0.3, #888cff ), color-stop(0.45, #14e5f3 ), color-stop(0.6, #a77fdf ),color-stop(0.75, #a77fdf ), color-stop(0.9, #ff2), color-stop(1, #1e90ff) ); background-image: gradient( linear, left top, right top, color-stop(0, #1e90ff), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #C3A8E9 ),color-stop(0.75, #C3A8E9 ), color-stop(0.9, #ff2), color-stop(1, #1e90ff) ); color:transparent; -webkit-background-clip: text; background-clip: text; } #loader { position: fixed; left: 0; right: 0; top: 27%; width: 390px; } #loader ul { margin: 0; list-style: none; width: 390px; position: relative; padding: 0; height: 210px; } #loader ul li { position: absolute; width: 0px; height: 18px; margin-top:20px; background-color: #fff; bottom: 0; } @keyframes sequence1 { 0% { width: 40px; } 50% { width: 280px; } 100% { width: 40px; } } @keyframes sequence2 { 0% { width: 50px; } 50% { width: 395px; } 100% { width: 50px; } } #loader li:nth-child(1) { top: 0; animation: sequence1 2s ease infinite 0; } #loader li:nth-child(2) { top: 15px; animation: sequence2 2s ease infinite 0.1s; } #loader li:nth-child(3) { top: 50px; animation: sequence1 2s ease-in-out infinite 0.2s; } #loader li:nth-child(4) { top: 85px; animation: sequence2 2s ease-in infinite 0.3s; } #loader li:nth-child(5) { top: 120px; animation: sequence1 2s ease-in-out infinite 0.4s; } #loader2 { position: fixed; left: 110px; right: 0; top: 43.3%; width: 390px; } #loader2 ul { margin: 0; list-style: none; width: 390px; position: relative; padding: 0; height: 210px; } #loader2 ul li { position: absolute; right: 0px; width: 0px; height: 18px; margin-top:20px; margin-left:100px; background-color: #fff; bottom: 0; } @keyframes sequence3 { 0% { width: 40px; } 50% { width: 380px; } 100% { width: 40px; } } @keyframes sequence4 { 0% { width: 50px; } 50% { width: 295px; } 100% { width: 50px; } } #loader2 li:nth-child(1) { top: 0; animation: sequence3 2s ease infinite 0; } #loader2 li:nth-child(2) { top: 15px; animation: sequence4 2s ease infinite 0.1s; } #loader2 li:nth-child(3) { top: 50px; animation: sequence3 2s ease-in-out infinite 0.2s; } #loader2 li:nth-child(4) { top: 85px; animation: sequence4 2s ease-in infinite 0.3s; } #loader2 li:nth-child(5) { top: 120px; animation: sequence3 2s ease-in-out infinite 0.4s; }
JAVASCRIPT
Expand for more options Login