DESIGN OF A WORKING CLOCK USING HTML AND C.S.S PART:-7

-

DESIGN OF A WORKING CLOCK


HI

Let Work with Animation. Today we are working on simple and easy animation. Have You Seen a Clock?. Stupid Question right! Let make a Clock and give a beautiful design of it. And we gonna give a beautiful background beside the clock.. 

MORE BLOGS AT:- https://darkwriter17.blogspot.com

Let Start The Program....


<!DOCTYPE html>
<html>
<head>
<title>analog clock</title>
<style>
.clock{
margin:0;
padding: 12px;
width: 520px;
height: 500px;
border-radius: 20%;
border-color: black;
border:0px;
border-style: double;
//background-color:HotPink;
margin-left: 35%; margin-top: 9%;
}
.time{
width: 50px;
height: 500px;
position: absolute;
transform-origin: 0%,100%;
margin-left:230px;
//border:1px solid;
font-family: LUCIDA HANDWRITING;
font-weight: bold;
color:yellow ;


}
#one{
transform: rotate(30deg);
}
#two{
transform: rotate(60deg);
}
#three{
transform: rotate(90deg);
}
#four{
transform: rotate(120deg);
}
#five{
transform: rotate(150deg);
}
#six{
transform: rotate(180deg);
}
#seven{
transform: rotate(210deg);
}
#eight{
transform: rotate(240deg);
}
#nine{
transform: rotate(270deg);
}
#ten{
transform: rotate(300deg);
}
#eleven{
transform: rotate(330deg);
}
#twelve{
transform: rotate(360deg);
}
.sui{
width:2px;
height: 250px;
position: absolute;
border:1px solid black;
background-color: black;
transform-origin:50% 100%;
margin-left: 250px;

}

#hour{
width:4px;
height:160px;
margin-top: 90px;
border-color: white;
animation: hour 216000s linear infinite;
}

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

#minute{
width:6px;
height:200px;
margin-top: 50px;
border-color: white;
animation: minute 3600s linear infinite;
}
@keyframes minute{
to{transform: rotate(360deg);}
}
#second{
width:0px;
height:220px;
margin-top: 30px;
border-color: deeppink;
animation: second 60s linear infinite;
}
@keyframes second{
to{transform: rotate(360deg);}
}
p{
position: absolute;
left:48%;
bottom:25%;
font-family: Vivaldi;
font-size:4em;
}

img{
min-width:100%;
min-height:100%;
position:absolute;
right: 0;
bottom: 0;
margin:0;
padding: 0;
}


</style>
</head>
<body>

<div class="clock">
<img src="file:///C:/Users/malhotra/Downloads/electricity-3442835_1920.jpg">
<div  class="time" id="one"><span style="display:inline-block;transform:rotate(-30deg);">I</span></div>
<div  class="time" id="two"><span style="display:inline-block;transform:rotate(-60deg);">II</span></div>
<div  class="time" id="three"><span style="display:inline-block;transform:rotate(-90deg);">III</span></div>
<div  class="time" id="four"><span style="display:inline-block;transform:rotate(-120deg);">IV</span></div>
<div  class="time" id="five"><span style="display:inline-block;transform:rotate(-150deg);">V</span></div>
<div  class="time" id="six"><span style="display:inline-block;transform:rotate(-180deg);">VI</span></div>
<div  class="time" id="seven"><span style="display:inline-block;transform:rotate(-210deg);">VII</span></div>
<div  class="time" id="eight"><span style="display:inline-block;transform:rotate(-240deg);">VIII</span></div>
<div  class="time" id="nine"><span style="display:inline-block;transform:rotate(-270deg);">IX</span></div>
<div  class="time" id="ten"><span style="display:inline-block;transform:rotate(-300deg);">X</span></div>
<div  class="time" id="eleven"><span style="display:inline-block;transform:rotate(-330deg);">XI</span></div>
<div  class="time" id="twelve"><span style="display:inline-block;transform:rotate(-360deg);">XII</span></div>

<div class="sui" id="hour"></div>
<div class="sui" id="minute"></div>
<div  class="sui" id="second"></div>
</div>
</body>
</html>


OUTPUT


Comments

Post a Comment

Popular posts from this blog

DATABASE ::: TREE TRAVERSAL

-
Image
Binary Tree Traversal | Inorder, Preorder and                                     Postorder Binary tree traversal can be done in the following ways. Inorder traversal Preorder traversal postorder traversal Consider the given binary tree, Inorder Traversal: 7 9 4 2 5 1 3 6 8 Preorder Traversal: 1 2 4 7 9 5 3 6 8 Postorder Traversal: 9 7 4 5 2 8 6 3 1 1/5 Inorder Traversal: For binary search trees (BST), Inorder Traversal specifies the nodes in non-descending order. In order to obtain nodes from BST in non-increasing order, a variation of inorder traversal may be used where inorder traversal is reversed. Preorder Traversal: Preorder traversal will create a copy of the tree. Preorder Traversal is also used to get the prefix expression of an expression. Postorder Traversal: Postorder traversal is used to get the postfix expression of an expression giv Algorithm for binary tree traversal Inorder(root) Traverse the left sub-tree, (recursi
Read more

Simple Degin Using HTML And CSS Part-2

-
Image
A Home Page Using HTML And CSS Today We are going to Make a beautiful home page by using HTML and CSS. In the given program i used two picture one for background aand one for logo. I gonna give the link of that pictures. We gonna write this program in "notepad++ or Sublime" or any other programming coder:-  And We will save it with ((anyname of u want).html). And run it in any Browser. So let's Start :- Let's See what we are going to make It's Look Beautiful. For the above Home We need to write some program in HTML and give Some Effect from CSS. <!DOCTYPE html> <html> <head> <title>DarkWriter Creations</title> <style> *{ margin: 0; padding: 0; font-family:century gothic; } header{ background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("file:///C:/Users/Karan/Desktop/New%20folder/42469-assassins-creed-syndicate-1920x1080-game-wallpaper.jpg"); height: 100vh;
Read more

Front End Processor

-
Image
Front End Processor (FEP) A  front end processor  (FEP), or a  communications processor , is a small-sized  computer  which interfaces to the  host computer  a number of  networks , such as  SNA , or a number of  peripheral devices , such as  terminals ,  disk units ,  printers  and  tape units . Data is transferred between the host computer and the front end processor using a high-speed  parallel interface . The front end processor communicates with peripheral devices using slower  serial interfaces , usually also through communication networks. The purpose is to off-load from the host computer the work of managing the peripheral devices, transmitting and receiving messages, packet assembly and disassembly, error detection, and error correction. [1]  Two examples are the  IBM 3705 Communications Controller  and the  Burroughs  Data Communications Processor. MORE BLOGS AT:-  https://darkwriter17.blogspot.com Sometimes FEP is synonymous with a  communications controller , alt
Read more