How to create A HELICOPTER by using the HTML and CSS? Write Codes.
Answers
In HTML
<!DOCTYPE html>
<html>
<head>
<title>helicopter</title>
<link rel = "stylesheet"
href = "p1.css"/>
</head>
<body>
<div id="containor">
<div class="dvln"></div>
<div id="dvcrcl">
</div>
<div class="body">
<div id="bdy"></div>
<div class="c1"></div>
<div class="c1" id="c1"></div>
</div>
<div class="whl" id="w1"></div>
<div class="whl" id="w2"></div>
</div>
</body>
</html>
In CSS file (p1.css)
*{
margin:0px;
padding:0px;
}
body{
background-color:#afeeee;
}
#containor{width:500px;
height:500px;
position:absolute ;
top:70%;
left:20%;
animation:mov1 6s infinite;
animation-direction:alternate;
}
#dvcrcl{
width:200px;
height:200px;
border-radius:50%;
background-color:transparent ;
box-shadow:0px 0px 0px 10px blue,
0px 0px 0px 20px pink ,
0px 0px 0px 30px blue;
transform:rotateX(80deg);
position:absolute ;
}
#dvcrcl:after{
content:"";
width:100px;
height:15px;
background-color:blue;
transform-origin:right;
position:absolute;
top:90px;
animation:mov 0.1s infinite ;
box-shadow:100px 0px 0px blue;
}
#dvcrcl:before{
content:"";
width:30px;
height:35px;
border-radius:50%;
background-color:red;
position:absolute;
top:48px;
left:80px;
z-index:999;
box-shadow:0px 20px 0px -5px orange,
0px 30px 0px -5px orange;
}
.dvln{
width:10px;
height:30px;
border-radius:5px;
background-color:red;
position:absolute;
left:90px;
top:98px;
}
.dvln:after{
content:"";
width:5px;
height:50px;
background-color:red;position:absolute ;
top:20px;
left:2px;
}
.body{
width:100px;
height:100px;
background-color:blue;
border-radius:50%;
position:absolute;
top:185px;
left:48px;
box-shadow:0px 0px 0px 10px pink;
}
.body:before{
content:"";
width:30px;
height:10px;
background-color:blue;position:absolute ;
border-radius:10px;
top:-19px;
left:30px;
}
.body:after{
content:"";
background-color:#add8e6;
width:50px;
height:50px;
border-radius:50% 5px 5px 5px;
position:absolute ;
overflow:hidden ;
left:10px;
top:10px;
}
#bdy{
width:135px;
height:40px;
border-radius:0% 10px 10px 0px;
background-color:blue;
position:absolute ;
left:105px;
box-shadow:0px 0px 0px 10px pink;
top:30px;
}
#bdy:after{content:"";
background-color:#add8e6;
width:110px;
height:20px;
border-radius:5% 5px 5px 5px;
position:absolute ;
left:10px;
top:10px;
}
#bdy:before{content:"";
background-color:pink;
width:15px;
height:30px;
border-radius:5% 5px 5px 5px;
position:absolute ;
left:110px;
top:-35px;
}
.whl{
width:10px;
height:50px;
background-color:blue;
border-radius:10px;
position:absolute;
}
#w1{
left:75px;
top:275px;
z-index:0;
transform:rotate(45deg);
}
#w2{
left:105px;
top:275px;
z-index:0;
transform:rotate(-45deg);
}
#w1:after{
position:absolute ;
content:"";
width:20px;
height:20px;
background-color:pink;
border-radius:50%;
top:40px;
left:-2px;
box-shadow:0px 0px 0px 5px blue;
}
#w2:after{
position:absolute ;
content:"";
width:20px;
height:20px;
background-color:pink;
border-radius:50%;
top:40px;
left:-2px;
box-shadow:0px 0px 0px 5px blue;
}
.c1{
width:10px;
height:45px;
background-color:blue;
position:absolute;
left:217px;
border-radius:50%;
top:-20px;
animation:mov .5s linear infinite ;
}
#c1{
animation-delay:0.11s;
}
@keyframes mov{
100%{transform:rotate(360deg);}
}
@keyframes mov1 {
100%{transform:translatey(-500px);}
}