SIMPLE DESIGN OF BICYCLE USING HTML AND CSS PART:-6

-
A MOVING BICYCLE


HI..
This Is Animation work over a moving cycle. it is fun to do work over animation every one should try this amazing work ..
MORE BLOGS AT:- https://darkwriter17.blogspot.com

The Program Start from Right here....


<!DOCTYPE html>
<html>
<head>
<title>revise</title>

<style>
body{
background-image:url(file:///G:/image/frank-zhang-675316-unsplash.jpg);
background-size: cover;

}

.wheelone{
width:220px;
height: 220px;
border-radius: 50%;
border:6px double black;
position:relative;
top:330px;
left:300px;
animation:wheelonemove 0.1s infinite linear;
}
@keyframes wheelonemove{
from{transform:rotate(0deg);}
to{transform:rotate(360deg); }
}
.wheeltwo{
width:220px;
height: 220px;
border-radius: 50%;
border:6px double black;
position: relative;
top:100px;
left: 790px;
animation:wheelonemove 0.1s infinite linear;
}

@keyframes wheelonemove{
from{transform:rotate(0deg);}
to{transform:rotate(360deg); }
}
.spokeone{
width: 1px;
height: 110px;
background: black;
border:2px solid black;
position:absolute;
transform: rotate(0deg);
left:100px;
top:-1px;
}
.spoketwo{
width: 1px;
height: 110px;
background: black;
border:2px solid black;
position:absolute;
left:105px;
top:-1px;
transform-origin: 0% 100%;
transform:rotate(119deg);
}
.spokethree{
width: 1px;
height: 100px;
background: black;
border:2px solid black;
position:absolute;
left:106px;
top:10px;
transform-origin: 0% 100%;
transform: rotate(240deg);
}

.spokefour{
width: 1px;
height: 110px;
background: black;
border:2px solid black;
position:absolute;
transform: rotate(0deg);
left:100px;
top:-1px;
}
.spokefive{
width: 1px;
height: 110px;
background: black;
border:2px solid black;
position:absolute;
left:105px;
top:-1px;
transform-origin: 0% 100%;
transform:rotate(119deg);
}
.spokesix{
width: 1px;
height: 100px;
background: black;
border:2px solid black;
position:absolute;
left:106px;
top:10px;
transform-origin: 0% 100%;
transform: rotate(240deg);
}
.pointerone{
width:30px;
height: 30px;
border-radius: 50%;
background: black;
position: relative;
bottom:-96px;
left: 87px;
}
.pointertwo{
width:30px;
height: 30px;
border-radius: 50%;
background: black;
position: relative;
bottom:-96px;
left: 87px;
}
.cyclebodyone{
width:260px;
height:4px;
border:3px solid ;
background: black;
position: relative;
left:410px;
bottom:21px;
}
.cyclebodytwo{
width:220px;
height:4px;
border:3px solid ;
background: black;
position: relative;
left:400px;
bottom:24px;
transform-origin: 0% 100%;
transform: rotate(-45deg);
}
.cyclebodythree{
width:8px;
height:270px;
border:3px solid ;
background: black;
position: relative;
left:600px;
bottom:270px;
transform: rotate(-37deg);
border-radius: 25%;
}
.cyclebodyfour{
width:260px;
height:15px;
border:1px solid ;
background: black;
position: relative;
left:560px;
bottom:480px;
transform: rotate(-3deg);
border-radius:20px;
}
.cyclebodyfive{
width:216px;
height:20px;
border:3px solid ;
background: black;
position: relative;
left:700px;
top:-335px;
transform-origin: 0% 100%;
transform: rotate(-55deg);
border-radius: 20px;
}

.cyclebodysix{
width:8px;
height:250px;
border:3px solid ;
background: black;
position: relative;
left:892px;
top:-600px;
transform-origin: 0% 100%;
transform: rotate(-23deg);
}
.cyclebodyseven{
width:120px;
height:30px;
border:3px solid ;
background: black;
position: relative;
left:470px;
bottom:825px;
border-radius: 30px;
}
.cyclebodyeight{
width:50px;
height:5px;
border:3px double;
background: black;
position: relative;
left:790px;
bottom:880px;
border-radius: 30px;
transform-origin: 0% 100%;
transform:rotate(-18deg);
}
.cyclebodynine{
width:4px;
height:110px;
border:3px solid ;
background: black;
position: relative;
left:833px;
bottom:960px;
border-radius: 30px;
}
</style>
</head>
<body>
<div class="wheelone">
<div class="spokeone"></div>
<div class="spoketwo"></div>
<div class="spokethree"></div>
<div class="pointerone"></div>
</div>
<div class="wheeltwo">
<div class="spokefour"></div>
<div class="spokefive"></div>
<div class="spokesix"></div>
<div class="pointertwo"></div>
</div>

<div class="cyclebodyone"></div>
<div class="cyclebodytwo"></div>
<div class="cyclebodythree"></div>
<div class="cyclebodyfour"></div>
<div class="cyclebodyfive"></div>
<div class="cyclebodysix"></div>
<div class="cyclebodyseven"></div>
<div class="cyclebodyeight"></div>
<div class="cyclebodynine"></div>

</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