Wavy CLock UI

HTML
<html > <head> <meta charset="UTF-8"> <title>Clock</title> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class='box'> <div class="wave" id='waveone' style="margin-top:-10%;" ></div> <div class="wave" id='wavetwo' style="margin-top:-10%;"></div> <div class="wave" id='wavethree' style="margin-top:-10%;"></div> <div class='title' id="title"></div> </div> </body> </html>
CSS
html, body { height: 100%; } html { background: #00BCD4; overflow: hidden; } body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .box { width: 350px; height: 600px; border-radius: 5px; box-shadow: 9px 10px 47px 2px rgba(0, 0, 0, 1.0); background: #1A237E; position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .wave { opacity: 1; position: absolute; left: 50%; background: #0277BD; width: 500px; height: 600px; margin-left: -250px; border-radius: 43%; } #waveone { -webkit-animation: drift 3000ms infinite linear; animation: drift 3000ms infinite linear; } #wavethree { -webkit-animation: drift 2500ms infinite linear; animation: drift 2500ms infinite linear; background:#2196F3; opacity:.5; } #wavetwo { -webkit-animation: drift 5000ms infinite linear; animation: drift 5000ms infinite linear; opacity: .9; background: #4FC3F7; } .box:after { content: ''; display: block; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, #42A5F5,#BBDEFB 80%, rgba(92,107,192 ,0.3 )); background: linear-gradient(to bottom, #42A5F5, rgba(40,53,147 ,0.2) 80%, #1A237E); z-index: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .title { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; line-height: 300px; text-align: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: white; text-transform: uppercase; font-family: 'Josefin Sans', sans-serif; letter-spacing: .4em; font-size: 42px; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9); text-indent: .3em; } @-webkit-keyframes drift { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes drift { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
JAVASCRIPT
timer(); function timer(){ var d=new Date(); min=d.getMinutes(); sec=d.getSeconds(); hr=d.getHours(); if(hr<10) hr="0"+hr; if(d.getMinutes()<10) min="0"+d.getMinutes(); if(d.getSeconds()<10) sec="0"+d.getSeconds(); document.getElementById("title").innerHTML=""+hr+":"+min+":"+sec; document.getElementById("wavethree").style.marginTop="-"+(d.getSeconds()+2)*2.5+"%"; document.getElementById("wavetwo").style.marginTop="-"+(d.getMinutes()+2)*2.4+"%"; document.getElementById("waveone").style.marginTop="-"+(d.getHours()+2)*2.3+"%"; var x2=document.getElementById("wavethree").style.marginTop; console.log(x2); var x3=document.getElementById("wavethree").style.top; } setInterval(timer,100);
Expand for more options Login