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

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