SIMPLE DESIGN OF MOVING HAND-PUMP USING HTML AND CSS PART:-4

-

Animation Over Handpump


Hi.

This Is my fourth work over Css and html. This time I gonnna Make A working hand-pump in this program we used little animation support us.


Let Start the Program...

<!DOCTYPE html>
<html>
<head>
<title>handpump</title>
<style>
body{
background-image:url(file:///C:/Users/Karan/Desktop/New%20folder/3d_mountain_1920x1200_3-1.jpg);
background-size:cover;
}
.rectangle{
width:70px;
height: 400px;
border:4px double black;
border-top-left-radius:25%;
border-top-right-radius:25%;
position: relative;
background-color: grey;
top:190px;
left:40%;
border-top-width: 40px;
}
.rodone,#moveone{
width:10px;
height: 495px;
border:2px double black;
background-color: black;
position: fixed;
top:41px;
left:42%;
border-top-right-radius: 10px;
animation: rodmove 1s infinite alternate;
}

@keyframes rodmove{
from{margin-top:50px;}
to{ margin-bottom:0px; }
}
.rodtwo{
width:300px;
height:10px;
border:2px double black;
background-color: black;
position: fixed;
top:100px;
left:290px;
border-top-right-radius: 10px;
//transform: rotate(160deg);
animation: rodmovetwo 1s infinite alternate;
}
@keyframes rodmovetwo{
from{margin-bottom: 70px; }
to{margin-left:0px; transform: rotate(-30deg);}
}

.rodthree{
width:200px;
height:5px;
border:1.5px double black;
background-color: black;
position:fixed;
top:190px;
left:500px;
//border-top-right-radius: 10px;
transform:rotate(67deg);
}
.inlet{
width:135px;
height:30px;
border:2px double black;
position: relative;
top:35px;
left:70px;
background-color: black;
border-top-right-radius: 28px;
}
.inlettwo{
width:40px;
height:90px;
border:2px double ;
position: relative;
top:10px;
left:166px;
background-color: black;
border-top-right-radius: 28px;
border-bottom-color:white;
border-bottom-width:20px;
}

.bucket{
width:130px;
height:160px;
border:2px double black;
position: relative;
top:50px;
left:130px;
//background-color: black;
border-top-width:45px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

}

p{
text-align: center;
font-size: 40px;
font-family:Vivaldi;
color:yellow;
}
h1{
text-align: right;
font-size: 60px;
font-family:Vivaldi;
position: relative;
right:50px;
bottom:360px;

}

</style>
</head>
<body>
<div class="rectangle">
<div class="rodone"></div>
<div class="rodtwo"></div>
<div class="inlet"></div>
<div class="inlettwo"></div>
<div class="bucket"> <p>Milton</p> </div>
</div>
<h1>Government Handpump</h1>
</body>
</html>
             


           OUTPUT



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


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