Clock project using html CSS and JavaScript

Create Clock using - html css and javascript

Source code

download project

*{
   margin: 0px;
   padding: 0px;
}
.manbody{
   color: white;
      background-color: #42445A;
    font-size: 15pt;
}
.clock-div{
   width: 100%;
   height: 100vw;
   background-color: #42445A;
   display: flex;
   align-items: center;
   justify-content: center ;
   flex-flow: column;
}
.clock-div .clock-circle{
   width: 60%;
   height: 60%;
   background-color: #FFFFFF;
   border-radius: 50%;
   background-image: url(/kindpng_5007647.png);
   background-size: cover;
   background-position: center;
   position: relative;
   animation: cchang 10s infinite;
  border: 5px solid #7BFF3A;
}

@keyframes cchang{ 
   10%{ border: 5px solid #7BFF3A; }
   20%{ border: 5px solid #04EDC1; }
   30%{ border: 5px solid #FFCA3A; }
   40%{ border: 5px solid #5D3AFF; }
   50%{ border: 5px solid #7BFF3A; }
   100%{ border: 5px solid #FF3ADF; }
}
#minutes{
   width: 3px;
      position: relative;
   left: 49.8%;
   top: 15%;
   height: 35%;
   background-color: black;
   transform-origin: bottom;
border-radius: 5px;
border-radius: 5px;
}
#second{
      width: 2px;
     position: absolute;
   left: 50%;
   height: 40%;
   top: 10%;
   border-radius: 5px;
   background-color: black;
   transform-origin: bottom;

}
#hour{
  position: absolute;
width:5px ;
height: 25%;
top: 25.1%;
left: 49.5%;
background-color: black;
transform-origin: bottom;
border-radius: 10px;

}

websitecodeinfo

यह ब्लॉग खोजें

Clock project using html CSS and JavaScript || websitecodeinfo

Create Clock using - html css and javascript

टिप्पणियाँ

एक टिप्पणी भेजें