How to Create A Digital Clock Using JavaScript

byPosted at
How to Create A Digital Clock Using JavaScript

Digital Clock

Learn How To Make a Digital Clock Using HTML, CSS, and JavaScript. Easy way to create a Digital Clock for beginners using HTML, CSS, and JavaScript. You will easily make a Digital Clock by watching and following the video tutorial steps. The video tutorial and Codes are, given below.

How to Make A Digital Clock Using HTML, CSS, and JavaScript.

  1. 0.0 - 1.00 min : Intro
  2. 1.00 - 18.0 min: Create A Digital Clock With Awesome Animations Using HTML CSS and Javascript



Digital Clock HTML

You can easily make this Digital Clock on your website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML, CSS, and JavaScript code that I give below. Paste this HTML, CSS, and JavaScript code into your HTML, CSS, and JavaScript file. On the youtube video tutorial, I tell you all the important points which help you to make the Digital Clock like that for your website. So I recommended you watch the digital Clock video Tutorial on how can I make this Digital Clock. this digital Clock is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Digital Clock video tutorial on how I make this. You can use this without any copyright.

About This Tutorial

In this tutorial, I will teach you How to Make a Digital Clock with Awesome Animations. In the video tutorial, First, I will show the Clock design, Which I will Create in HTML, CSS, and JavaScript(JS). After, I will start to make this Digital Clock. Master File(Source Code File) given Above the post. This Clock shows that time which time show in your PC. I hope, You Like This Tutorial. If you have any questions or problems with this tutorial, Contact me.

HTML 


<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/normalize.min.css" rel="stylesheet">
</head>

<body>
<!-- partial:index.partial.html -->
<div class="time" data-hours="" data-minutes="" id="time">
  <div class="digit">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="digit">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="digit">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="digit">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="digit">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="digit">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>
<script src="js/Rx.min.js" type="text/javascript"></script>
<script src="js/rxcss.min.js" type="text/javascript"></script>
<script src="js/hammer.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>

CSS 
:root {
  --mouse-x: 0;
  --mouse-y: 0;
}

.time {
  display: flex;
  flex-direction: row;
  -webkit-transform: translateZ(20px);
          transform: translateZ(20px);
  -webkit-transform: translateZ(20px) rotateX(calc(var(--mouse-y) * 45deg)) rotateY(calc(var(--mouse-x) * 45deg));
          transform: translateZ(20px) rotateX(calc(var(--mouse-y) * 45deg)) rotateY(calc(var(--mouse-x) * 45deg));
}

* {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.digit {
  height: 20vmin;
  width: 10vmin;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  margin: 0 1rem;
}
.digit, .digit:after, .digit:before {
  transition: -webkit-transform 1s cubic-bezier(0.5, 0, 0.5, 1);
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1), -webkit-transform 1s cubic-bezier(0.5, 0, 0.5, 1);
}
.digit:hover {
  -webkit-transform: translateZ(2vmax);
          transform: translateZ(2vmax);
}
.digit:hover:after, .digit:hover:before {
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
.digit:nth-child(2), .digit:nth-child(4) {
  margin-right: 3vmax;
}
.digit:nth-child(2):before, .digit:nth-child(2):after, .digit:nth-child(4):before, .digit:nth-child(4):after {
  content: '';
  background: white;
  display: block;
  position: absolute;
  text-align: center;
  width: 1vmax;
  height: 1vmax;
  left: calc(100% + 2vmax);
  box-shadow: 0 0 1rem #0BFDFD, inset 0 0 0.25vmax #0BFDFD;
  font-size: 8vmax;
  text-shadow: 0 0 1rem #0BFDFD;
  -webkit-animation: pulse 1s alternate cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: pulse 1s alternate cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.digit:nth-child(2):before, .digit:nth-child(4):before {
  top: 30%;
}
.digit:nth-child(2):after, .digit:nth-child(4):after {
  bottom: 30%;
}

@-webkit-keyframes pulse {
  to {
    opacity: 0.5;
  }
}

@keyframes pulse {
  to {
    opacity: 0.5;
  }
}
[data-hours^="0"] .digit:nth-child(1) :nth-child(4):before, [data-hours^="0"] .digit:nth-child(1) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="0"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="0"] .digit:nth-child(2) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="0"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="0"] .digit:nth-child(3) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="0"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="0"] .digit:nth-child(4) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="0"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="0"] .digit:nth-child(5) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="0"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="0"] .digit:nth-child(6) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours^="1"] .digit:nth-child(1) :nth-child(1):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(2):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(4):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(5):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="1"] .digit:nth-child(1) :nth-child(6):before, [data-hours^="1"] .digit:nth-child(1) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="1"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(2):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="1"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="1"] .digit:nth-child(2) :nth-child(6):before,
 [data-hours$="1"] .digit:nth-child(2) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="1"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(2):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="1"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="1"] .digit:nth-child(3) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="1"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(2):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="1"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="1"] .digit:nth-child(4) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="1"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(2):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="1"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="1"] .digit:nth-child(5) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="1"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(2):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="1"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="1"] .digit:nth-child(6) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours^="2"] .digit:nth-child(1) :nth-child(1):before, [data-hours^="2"] .digit:nth-child(1) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours^="2"] .digit:nth-child(1) :nth-child(7):before, [data-hours^="2"] .digit:nth-child(1) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="2"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="2"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="2"] .digit:nth-child(2) :nth-child(7):before, [data-hours$="2"] .digit:nth-child(2) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="2"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="2"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="2"] .digit:nth-child(3) :nth-child(7):before, [data-minutes^="2"] .digit:nth-child(3) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="2"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="2"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="2"] .digit:nth-child(4) :nth-child(7):before, [data-minutes$="2"] .digit:nth-child(4) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="2"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="2"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="2"] .digit:nth-child(5) :nth-child(7):before, [data-seconds^="2"] .digit:nth-child(5) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="2"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="2"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="2"] .digit:nth-child(6) :nth-child(7):before, [data-seconds$="2"] .digit:nth-child(6) :nth-child(7):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="3"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="3"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="3"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="3"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="3"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="3"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="3"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="3"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="3"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="3"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="3"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="3"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="3"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="3"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="3"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="3"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="3"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="3"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="3"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="3"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="4"] .digit:nth-child(2) :nth-child(2):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="4"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="4"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="4"] .digit:nth-child(2) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="4"] .digit:nth-child(3) :nth-child(2):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="4"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="4"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="4"] .digit:nth-child(3) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="4"] .digit:nth-child(4) :nth-child(2):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="4"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="4"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="4"] .digit:nth-child(4) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="4"] .digit:nth-child(5) :nth-child(2):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="4"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="4"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="4"] .digit:nth-child(5) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="4"] .digit:nth-child(6) :nth-child(2):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(2):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="4"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="4"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="4"] .digit:nth-child(6) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="5"] .digit:nth-child(2) :nth-child(3):before, [data-hours$="5"] .digit:nth-child(2) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="5"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="5"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="5"] .digit:nth-child(3) :nth-child(3):before, [data-minutes^="5"] .digit:nth-child(3) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="5"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="5"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="5"] .digit:nth-child(4) :nth-child(3):before, [data-minutes$="5"] .digit:nth-child(4) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="5"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="5"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="5"] .digit:nth-child(5) :nth-child(3):before, [data-seconds^="5"] .digit:nth-child(5) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="5"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="5"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="5"] .digit:nth-child(6) :nth-child(3):before, [data-seconds$="5"] .digit:nth-child(6) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="5"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="5"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="6"] .digit:nth-child(2) :nth-child(3):before, [data-hours$="6"] .digit:nth-child(2) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="6"] .digit:nth-child(3) :nth-child(3):before, [data-minutes^="6"] .digit:nth-child(3) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="6"] .digit:nth-child(4) :nth-child(3):before, [data-minutes$="6"] .digit:nth-child(4) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="6"] .digit:nth-child(5) :nth-child(3):before, [data-seconds^="6"] .digit:nth-child(5) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="6"] .digit:nth-child(6) :nth-child(3):before, [data-seconds$="6"] .digit:nth-child(6) :nth-child(3):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="7"] .digit:nth-child(2) :nth-child(1):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="7"] .digit:nth-child(2) :nth-child(4):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="7"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-hours$="7"] .digit:nth-child(2) :nth-child(6):before, [data-hours$="7"] .digit:nth-child(2) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="7"] .digit:nth-child(3) :nth-child(1):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="7"] .digit:nth-child(3) :nth-child(4):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="7"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes^="7"] .digit:nth-child(3) :nth-child(6):before, [data-minutes^="7"] .digit:nth-child(3) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="7"] .digit:nth-child(4) :nth-child(1):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="7"] .digit:nth-child(4) :nth-child(4):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="7"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-minutes$="7"] .digit:nth-child(4) :nth-child(6):before, [data-minutes$="7"] .digit:nth-child(4) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="7"] .digit:nth-child(5) :nth-child(1):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="7"] .digit:nth-child(5) :nth-child(4):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="7"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds^="7"] .digit:nth-child(5) :nth-child(6):before, [data-seconds^="7"] .digit:nth-child(5) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="7"] .digit:nth-child(6) :nth-child(1):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(1):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="7"] .digit:nth-child(6) :nth-child(4):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(4):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="7"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}
[data-seconds$="7"] .digit:nth-child(6) :nth-child(6):before, [data-seconds$="7"] .digit:nth-child(6) :nth-child(6):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-hours$="9"] .digit:nth-child(2) :nth-child(5):before, [data-hours$="9"] .digit:nth-child(2) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes^="9"] .digit:nth-child(3) :nth-child(5):before, [data-minutes^="9"] .digit:nth-child(3) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-minutes$="9"] .digit:nth-child(4) :nth-child(5):before, [data-minutes$="9"] .digit:nth-child(4) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds^="9"] .digit:nth-child(5) :nth-child(5):before, [data-seconds^="9"] .digit:nth-child(5) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

[data-seconds$="9"] .digit:nth-child(6) :nth-child(5):before, [data-seconds$="9"] .digit:nth-child(6) :nth-child(5):after {
  opacity: 0.3;
  -webkit-transform: translateZ(-2vmax);
          transform: translateZ(-2vmax);
}

.line {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.line:before, .line:after {
  content: '';
  display: block;
  position: absolute;
  color: #0BFDFD;
  background: white;
  transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1);
  border-radius: 1ch;
  box-shadow: 0 0 1rem #0BFDFD, inset 0 0 0.125vmin #0BFDFD;
}
.line:after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1);
}
.line:nth-child(2n - 1) {
  height: 50%;
  width: 0.5vmin;
}
.line:nth-child(2n - 1):before, .line:nth-child(2n - 1):after {
  height: calc(50% - 0.25vmin);
  width: 100%;
}
.line:nth-child(2n - 1):before {
  top: 0.25vmin;
  -webkit-transform-origin: center top;
          transform-origin: center top;
}
.line:nth-child(2n - 1):after {
  bottom: 0.25vmin;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.line:nth-child(2n) {
  width: 100%;
  height: 0.5vmin;
}
.line:nth-child(2n):before, .line:nth-child(2n):after {
  height: 100%;
  width: calc(50% - 0.25vmin);
}
.line:nth-child(2n):before {
  left: 0.25vmin;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.line:nth-child(2n):after {
  right: 0.25vmin;
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.line:nth-child(1) {
  top: 0;
  left: 0;
}
.line:nth-child(2) {
  top: 0;
  left: 0;
}
.line:nth-child(3) {
  top: 0;
  right: 0;
}
.line:nth-child(4) {
  top: 50%;
  left: 0;
}
.line:nth-child(5) {
  top: 50%;
  left: 0;
}
.line:nth-child(6) {
  bottom: 0;
  left: 0;
}
.line:nth-child(7) {
  top: 50%;
  right: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #121212;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

*:before, *:after {
  content: '';
  display: block;
}

JavaScript 
 
const timeElm = document.getElementById('time');
const doc = document.documentElement;
const { clientWidth, clientHeight } = doc;

const pad = val => val < 10 ? `0${val}` : val;

const animationFrame$ = Rx.Observable.interval(0, Rx.Scheduler.animationFrame);

const time$ = Rx.Observable.
interval(1000).
map(() => {
  const time = new Date();

  return {
    hours: time.getHours(),
    minutes: time.getMinutes(),
    seconds: time.getSeconds() };

}).
subscribe(({ hours, minutes, seconds }) => {
  timeElm.setAttribute('data-hours', pad(hours));
  timeElm.setAttribute('data-minutes', pad(minutes));
  timeElm.setAttribute('data-seconds', pad(seconds));
});

const mouse$ = Rx.Observable.
fromEvent(document, 'mousemove').
map(({ clientX, clientY }) => ({
  x: (clientWidth / 2 - clientX) / clientWidth,
  y: (clientHeight / 2 - clientY) / clientHeight }));


const smoothMouse$ = animationFrame$.
withLatestFrom(mouse$, (_, m) => m).
scan(RxCSS.lerp(0.1));

RxCSS({
  mouse: smoothMouse$ },
timeElm);

The Download Links Will Be Shown in 30 Seconds


How To Dowload Files
Share
Post a Comment Labels, ,

Comments


Archive

Contact Form

Send