DESIGN OF A MOVING CAR USING HTML & CSS PART:-8

-

DESIGN OF A MOVING CAR


HI

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

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

Let Start The Program....



<!DOCTYPE html>
<html>
<head>
<title>Movable Car</title>
<style>
body{
background-color:aquamarine;
}
*{
margin:0;
padding:0px;
}
.pathone{
width: 500px;
height:120px;
background-color: black;
position: relative;
top: 400px;
left:0px;
}
.pathtwo{
width:120px;
height: 460px;
background-color: black;
position: relative;
left:450px;
bottom:60px;
}
.paththree{
width:120px;
height:500px;
background-color:black;
position: relative;
bottom:551px;
left:640px;
transform: rotate(135deg);
border-radius: 10px;
}
.pathfour{
width:120px;
height: 500px;
background-color: black;
position: relative;
bottom:1050px;
left:912px;
transform: rotate(225deg);
border-radius: 6px;
}
.pathfive{
width:120px;
height: 455px;
background-color: black;
position: relative;
bottom:1518px;
left:1105px;
}

.pathsix{
width:350px;
height:120px;
background-color: black;
position: relative;
bottom:1637px;
left:1105px;
}

.pathseven{
width:129px;
height:270px;
background-color: black;
position: relative;
bottom:1757px;
left:1450px;

}
.patheight{
width:1450px;
height:120px;
background-color: black;
position: relative;
bottom:1757px;
left:130px;
}
.pathnine{
width:130px;
height:270px;
background-color: black;
position: relative;
bottom:2027px;
left:0px;
}
.carwheelone{
width:30px;
height: 30px;
border:2px double red;
border-radius: 50%;
position: relative;
bottom:2340px;
left:50px;
animation:movetyre 3s infinite linear;
}
@keyframes movetyre{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}


.spokeone{
width:0px;
height:28px;
border:1px double green;
position: absolute;
top:0px;
left:14px;
}
#firsttyreone{
transform: rotate(0deg;);
}
#firsttyretwo{
transform: rotate(120deg);
}
#firsttyrethree{
transform: rotate(240deg);
}

.pointerone{
width:5px;
height:5px;
border:2px double yellow;
border-radius: 50%;
position: relative;
left:10.5px;
top:10px;
}

.carwheeltwo{
width:30px;
height:30px;
border:2px double red;
border-radius: 50%;
position: relative;
bottom:2374px;
left:110px;
animation:movetyretwo 3s infinite linear;
}
@keyframes movetyretwo{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}


.spoketwo{
width:0px;
height:28px;
border:1px double green;
position: absolute;
top:0px;
left:14px;
}
#secondtyreone{
transform: rotate(0deg;);
}
#secondtyretwo{
transform: rotate(120deg);
}
#secondtyrethree{
transform: rotate(240deg);
}

.pointertwo{
width:5px;
height:5px;
border:2px double yellow;
border-radius: 50%;
position: relative;
left:10.5px;
top:10px;
}
.carbodyone{
width:180px;
height:0px;
border:1px solid blue;
position: relative;
bottom: 2410px;
left:20px;
}

.carbodytwo{
width:0px;
height:15px;
border:1px solid blue;
position:relative;
bottom: 2428px;
left:20px;
border-radius:20px
}

.carbodythree{
width:16px;
height:0px;
border:1px solid blue;
position:relative;
bottom: 2445px;
left:20px;
border-radius:20px;
}

.carbodyfour{
width:30px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2459px;
left:29px;
transform: rotate(123deg);
border-radius:50%;
}
.carbodyfive{
width:60px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2474px;
left:53px;
border-radius: 40%;
}

.carbodysix{
width:20px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2459px;
left:45px;
transform: rotate(123deg);
border-radius:50%;
}

.carbodyseven{
width:20px;
height:00px;
border:0.9px solid blue;
position:relative;
bottom: 2469.5px;
left:61px;
border-radius:40%;
}

.carbodyeight{
width:00px;
height:16px;
border:0.9px solid blue;
position:relative;
bottom: 2470.5px;
left:81px;
border-radius:20%;
}
.carbodynine{
width:31px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2471.5px;
left:50px;
border-radius:0%;
}
.carbodyten{

width:00px;
height:16px;
border:0.9px solid blue;
position:relative;
bottom: 2490px;
left:85px;
border-radius:20%;
}
.carbodyeleven{
width:31px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2492px;
left:85px;
border-radius:0%;

}
.carbodytwelve{
width:20px;
height:00px;
border:0.9px solid blue;
position:relative;
bottom: 2510px;
left:85px;
border-radius:40%;
}
.carbodythirteen{
width:20px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2504px;
left:101px;
transform: rotate(52deg);
border-radius:50%;

}

.carbodyfourteen{
width:27px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2512px;
left:110px;
transform: rotate(45deg);
border-radius:50%;
}

.carbodyfifteen{
width:46px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2504px;
left:134px;
//transform: rotate(45deg);
}

.carbodysixteenteen{
width:27px;
height:0px;
border:0.9px solid blue;
position:relative;
bottom: 2495px;
left:178px;
transform: rotate(45deg);
}
.carmove{
animation: carrun 13s infinite linear;
}
@keyframes carrun{
0%{ margin-left: 0%; margin-top:0%;}
25%{ margin-left: 22%; margin-top:0%;}
50%{ margin-top: 10%; margin-top: 0%;}
75%{ margin-left: 10%; margin-top: 0%;}
}
</style>
</head>
<body>
<div class="pathone"></div>
<div class="pathtwo"></div>
<div class="paththree"></div>
<div class="pathfour"></div>
<div class="pathfive"></div>
<div class="pathsix"></div>
<div class="pathseven"></div>
<div class="patheight"></div>
<div class="pathnine"></div>


<main class="carmove">
<div class="carwheelone">
<div class="pointerone"></div>
<div class="spokeone" id="firsttyreone"></div>
<div class="spokeone" id="firsttyretwo"></div>
<div class="spokeone" id="firsttyrethree"></div>
</div>

<div class="carwheeltwo">
<div class="pointertwo"></div>
<div class="spoketwo" id="secondtyreone"></div>
<div class="spoketwo" id="secondtyretwo"></div>
<div class="spoketwo" id="secondtyrethree"></div>
</div>

<div class="carbodyone"></div>
<div class="carbodytwo"></div>
<div class="carbodythree"></div>
<div class="carbodyfour"></div>
<div class="carbodyfive"></div>
<div class="carbodysix"></div>
<div class="carbodyseven"></div>
<div class="carbodyeight"></div>
<div class="carbodynine"></div>
<div class="carbodyten"></div>
<div class="carbodyeleven"></div>
<div class="carbodytwelve"></div>
<div class="carbodythirteen"></div>
<div class="carbodyfourteen"></div>
<div class="carbodyfifteen"></div>
<div class="carbodysixteenteen"></div>


</main>




</body>
</html>



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

Comments

Post a Comment

Popular posts from this blog

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 A...
Read more

Short Note On Database, Stack And Queues, Linked List, Trees, Searching And Sorting, Tables And Graphs And Introduction About CAD

-
Image
DATABASE In  computer science , a  data structure  is the organization and implementation of values and  information . In simple words data structure is the way of organizing data in efficient manner. Data structures are different from abstract data types in the way they are used. Data structures are the implementations of abstract data types in a concrete and physical setting.  They do this by using  algorithms . This can be seen in the relationship between the list (abstract data type) and the linked list (data structure). A  list  contains a sequence of values or bits of information. A linked list also has a “pointer” or “reference” between each node of information that points to the next item and the previous one. This allows one to go forwards or backwards in the list. Furthermore, data structures are often optimized for certain operations. Finding the best data structure when solving a problem is an important part of...
Read more

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 Alg...
Read more