Creating a Helicopter using CSS | HTML & CSS

 Hello, learner In this article, we are going to Create a Helicopter using CSS. In the earlier past post, we have created Creating a Heart using CSS | HTML & CSS. Now it is time to create a Helicopter.

Creating a Helicopter using CSS | HTML & CSS



In this program, we create a Helicopter using HTML and CSS. At first in the HTML section we have to create a div class rotor inside this we have two propellers with class names r1 and r2 after that we have to create top, body, front, and ls inside the div for the design of the helicopter. Now in CSS we have to design it we have used clip-path: polygon for propeller rotation after that we color all dive and give different radius for their part design.

Creating a Helicopter using CSS [Source code]

To create a Creating a Helicopter using CSS you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code. 

At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="Stylesheet" href="style.css">

    <title>Document</title>

</head>

<body>

  <div class="helicopter">

    <div class="rotor">

      <div class="r1"></div>

      <div class="r2"></div>

    </div>

    <div class="top"></div>

    <div class="body"></div>

    <div class="front"></div>

    <div class="ls"></div>

  </div>

</body>

</html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

.helicopter {

  position: relative;

  margin: auto;

  height: 300px;

  width: 400px;

  filter: drop-shadow(0 0 1px #000000);

}


.body {

  position: absolute;

  left: 0;

  bottom: 0;

  background: radial-gradient(circle, #000000, #4b4e2c 60%);

  width: 200px;

  height: 200px;

  clip-path: polygon(0 33%, 3% 27%, 9% 30%, 13% 41%, 100% 41%, 100% 81%, 72% 81%, 56% 56%, 13% 53%, 5% 64%, 0 62%);

}


.front {

  background: radial-gradient(circle, #000000, #4b4e2c 60%);

  width: 80px;

  height: 80px;

  position: absolute;

  left: 49%;

  bottom: 12.7%;

  border-radius: 0 60% 50% 0;

}

.front::after {

  content: "";

  background-color: #eeeeee;

  width: 40px;

  height: 40px;

  position: absolute;

  left: 40%;

  bottom: 40%;

  border-radius: 5% 80% 5% 5%;

}


.top {

  position: absolute;

  left: 38%;

  bottom: 38%;

  background: radial-gradient(circle, #000, #4b4e2c);

  width: 80px;

  height: 15px;

  border-radius: 50% 50% 0 0;

}


.rotor {

  position: absolute;

  left: 11%;

  bottom: 35%;

  width: 300px;

  height: 50px;

  transform-style: preserve-3d;

  animation: anim 1s infinite linear;

}


.r1,

.r2 {

  position: absolute;

  width: 300px;

  height: 8px;

  border-radius: 30%;

  background: radial-gradient(circle, #000000, #4b4e2c);

}


.r2 {

  transform: rotateY(90deg);

}


.r1::after,

.r2::after {

  content: "";

  position: absolute;

  left: 50.2%;

  top: 0%;

  background-color: #000000;

  width: 4px;

  height: 35px;

}


@keyframes anim {

  0% {

    transform: rotateY(0deg) rotateX(3deg);

  }

  100% {

    transform: rotateY(360deg) rotateX(3deg);

  }

}


.ls {

  position: absolute;

  left: 30%;

  bottom: 6%;

  background-color: #000000;

  width: 150px;

  height: 20px;

  clip-path: polygon(

    0 70%,

    15% 100%,

    90% 100%,

    100% 70%,

    98% 60%,

    90% 85%,

    62% 80%,

    62% 0,

    60% 0,

    60% 80%,

    34% 80%,

    34% 0,

    32% 0,

    32% 80%,

    15% 85%,

    5% 65%

  );

That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

 

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.