Watch Design Using Html And CSS

Hello friends, in this blog you will learn how to create a digital clock using html and CSS, you must have seen more working digital clock made from JavaScript. Here you will learn how to make a digital clock designed by CSS animation. It is not working. It is created by animation.

It is an analog clock that can be used to adjust the time and its hour needles are marked by numbers from 1 to 12 which you will easily learn to make an animation clock.

You can see in this image that this is a clock designed using an animation that is created using html and CSS. You can also call this clock Neumorphism animation clock, setting this clock needle as the time from the animation. Has been done which looks like an analog working clock. That you can do this using html and CSS Banana will be taught.

Usually the working by which have been given 12 points for viewing from 1 to 12 hours minutes and seconds 3 needle has been which hour hand is the shortest and greater minute hand is the largest second needle that animation Is designed


CSS Animation Clock Design Using Html And CSS Source Codes

We know about the HTML code of Animation Clock. To create this clock, a div is taken inside the body tag whose class name is wrapper, the ul tag is taken inside this div and this ul tag is called unorder list. Is used for the list and fifteen li tags are taken of this ul li class is given from class number one to twelve inside which numbers from 1 to 12 are written.

li The class names of the three li tags below twelve have been given a different name, whose class name is as follows: hour minute and second class hour were written as the hour of this clock with the smallest needle in the hour and the minute of the class minute. Is written for the needle and after that the second is written for the second needle

You know about the css style of the animation clock. By zeroing the page margin and padding, the tags of html take up space according to their own. To remove that space, zero margin and padding have to be zero, after that the class wrapper. Gave the property of width height background-color and font-family that you see in the image above, after this id clock is also styled by giving widht height and background-color other property

This clock is styled the needle only with the css animation, so that the clock needle rotates 360 degrees, which you are seeing in the image, you are in the beginning and you are learning html and css, then you have this type of design for you It will be very helpful to learn how to design this type of clock from html and css.


So, if you are having trouble in understanding this, then by watching the tutorial video of this watch, you can understand this video is given below.


Video Tutorial of CSS Animation Clock Design



I hope that today by watching this animation working clock basically the code will be easily understood as you are seeing in this video that a clock is actually created using CSS animation which we share this watch Is done which is made from html and CSS.

If you have understood this animation clock, I mean to say that you like this clock, then you can get its source code, so if you want to get this code then below is given two files html or CSS Scroll and copy the file and paste it into your file.

HTML CODE FILE :


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="clock.css" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
    <ul id="clock">
      <li class="numbers"><span>1</span></li>
      <li class="numbers"><span>2</span></li>
      <li class="numbers"><span>3</span></li>
      <li class="numbers"><span>4</span></li>
      <li class="numbers"><span>5</span></li>
      <li class="numbers"><span>6</span></li>
      <li class="numbers"><span>7</span></li>
      <li class="numbers"><span>8</span></li>
      <li class="numbers"><span>9</span></li>
      <li class="numbers"><span>10</span></li>
      <li class="numbers"><span>11</span></li>
      <li class="numbers"><span>12</span></li>
      <li id="hour"></li>
      <li id="minute"></li>
      <li id="second"></li>
    </ul>
  </div>
</body>

</html>

CSS CODE FILE :


* {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  width: 100%;
  background-color: #25283D;
  font-family: 'Josefin Sans', sans-serif;
  float: left;
}

#clock {
  width: 280px;
  height: 280px;
  background: #25283D;
  border: 18px solid #1e213a;
  border-radius: 50%;
  margin: 200px auto 60px;
  position: relative;
  box-shadow: inset 0 5px 25px #00000080,
    0 5px 25px #00000080,
    0 5px 30px #00000080,
    0 5px 35px #00000080,
    0 5px 40px #00000080,
    0 5px 45px #00000080;
}

#clock:before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  left: -18px;
  top: -10px;
  border: 18px solid #CCCCCC;
  border-radius: 50%;
  z-index: -2;
}

#clock:after {
  content: '';
  width: 18px;
  height: 18px;
  background: #c7d8f8;
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 9px);
  top: calc(50% - 9px);
  box-shadow: 0 2px 4px #00000026;
}

#clock li {
  list-style-type: none;
  position: absolute;
}

.numbers {
  position: absolute;
  width: 90%;
  height: 90%;
  padding: 5%;
  text-align: center;
}

.numbers span {
  display: block;
  color: #dbe7fd;
  font-size: 38px;
  text-shadow: 0 5px 18px #00000026, 0 2px 3px #00000033;
}

.numbers:nth-child(1) {
  transform: rotate(30deg);
}

.numbers:nth-child(1) span {
  transform: rotate(-30deg);
}

.numbers:nth-child(2) {
  transform: rotate(60deg);
}

.numbers:nth-child(2) span {
  transform: rotate(-60deg);
}

.numbers:nth-child(3) {
  transform: rotate(90deg);
}

.numbers:nth-child(3) span {
  transform: rotate(-90deg);
}

.numbers:nth-child(4) {
  transform: rotate(120deg);
}

.numbers:nth-child(4) span {
  transform: rotate(-120deg);
}

.numbers:nth-child(5) {
  transform: rotate(150deg);
}

.numbers:nth-child(5) span {
  transform: rotate(-150deg);
}

.numbers:nth-child(6) {
  transform: rotate(180deg);
}

.numbers:nth-child(6) span {
  transform: rotate(-180deg);
}

.numbers:nth-child(7) {
  transform: rotate(210deg);
}

.numbers:nth-child(7) span {
  transform: rotate(-210deg);
}

.numbers:nth-child(8) {
  transform: rotate(240deg);
}

.numbers:nth-child(8) span {
  transform: rotate(-240deg);
}

.numbers:nth-child(9) {
  transform: rotate(270deg);
}

.numbers:nth-child(9) span {
  transform: rotate(-270deg);
}

.numbers:nth-child(10) {
  transform: rotate(300deg);
}

.numbers:nth-child(10) span {
  transform: rotate(-300deg);
}

.numbers:nth-child(11) {
  transform: rotate(330deg);
}

.numbers:nth-child(11) span {
  transform: rotate(-330deg);
}

#second {
  width: 100%;
  height: 100%;
  animation: sec 60s steps(60, end) infinite;
}

#second:after {
  content: '';
  width: 4px;
  height: 107px;
  border-radius: 2px;
  background: #FD2E62;
  position: absolute;
  left: calc(50% - 2px);
  top: 55px;
  box-shadow: 1px 2px 3px #00000026;
}

#minute {
  width: 100%;
  height: 100%;
  animation: sec 3600s steps(60, end) infinite;
}

#minute:after {
  content: '';
  width: 8px;
  height: 79px;
  border-radius: 4px 4px 2px 2px;
  background: #bed4fd;
  position: absolute;
  left: calc(50% + 30px);
  top: 29%;
  transform: rotate(-120deg);
  box-shadow: -1px 0 5px #00000026;
}

#hour {
  width: 100%;
  height: 100%;
  transform: rotate(120deg);
}

#hour:after {
  content: '';
  width: 12px;
  height: 65px;
  border-radius: 6px 6px 3px 3px;
  background: #07f3dfb4;
  position: absolute;
  left: calc(50% - 4px);
  top: 50%;
  box-shadow: 1px 0 4px #00000026;
}

@keyframes sec {
  to {
    transform: rotate(360deg);
  }
}

Post a Comment

Previous Post Next Post