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

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

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

SHORT INTRODUCTION OF C

-
Image
INTRODUCTION  OF C                 C   seems a strength name for a programming language.  It is a very popular language of computer era. C was an offspring of the BCPL (Basic Combined Programming language) called B. The B language was modified by Dennis Ritchie implemented at Bell laboratories in 1972. The new language was named C. It was developed along with UNIX operating system. This operating system was also developed at Bell laboratories was coded almost entirely in C. For many years c was used in academic environments but eventually with C compiler for commercial use and increase popularity of UNIX. It begain to get wide spread support among computer professionals. Today C is running under a number of operating system including MS DOS and other operating system.                           C is a very popular language use the increasing popularity of C...
Read more