Categories
CSS Web development

CSS Paper Plane Animation



Yesterday I’ve made a tutorial on how to draw a paper plane in Adobe Illustrator. I’ve got some messages from you (thank you for all messages!) about the tutorial of the paper plane but created with HTML and CSS.

CSS Paper plane

So, yes it is possible. You can easily create a paper plane using CSS only. Follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="paperplane">
  <div class="plane">
    <div class="wingRight"></div>
    <div class="wingLeft"></div>
    <div class="bottom"></div>
    <div class="top"></div>
    <div class="middle"></div>
  </div>
   <div class="clouds">
    <div class="cloudOne"></div>
    <div class="cloudTwo"></div>
    <div class="cloudThree"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.paperplane {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  background-color: #50befa;
  border-radius:50%;
}

.plane {
  position: absolute;
  left:200px;
  top:150px;
  animation: move 3s linear infinite;
}

Style the paper plane:

.wingRight {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 22.5px solid transparent;
  border-right: 12.5px solid transparent;
  border-bottom: 115px solid white;
  transform: rotate(61deg); 
  z-index:4;
}

.bottom {
  position: relative;
  width: 0;
  height: 0;
  border-left: 12.5px solid transparent;
  border-right: 12.5px solid transparent;
  border-bottom: 25.5px solid #676d70;
  top: 71px;
  transform: rotate(-5deg);
  left:-52.5px;
  z-index:3;
}

.top {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 30px solid #c1c7c9;
  top: 65px;
  transform: rotate(5deg);
  left:-60px;
  z-index:1;
}

.middle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 135px solid #c1c7c9;
  top: -13.5px;
  transform: rotate(72deg);
  left:-7.5px;
  z-index:2;
}

.wingLeft {
  position: absolute; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-bottom: 135px solid white;
  transform: rotate(78deg) skewY(-35deg); 
  left:-18.5px;
  z-index:3;
  top:-30px;
}
CSS Paper Plane

Add some clouds:

.clouds {
  position: absolute;
  top:50px;
  left:100px;
}
.cloudOne, .cloudTwo, .cloudThree {
  position: absolute;
  width: 50px;
  height: 25px;
  background-color: #fff;
  border-radius:100px 100px 0 0;
}

.cloudOne {
  top:0;
  left:0;
  animation: cloud 3s linear infinite reverse;
}

.cloudTwo {
  top:50px;
  left:100px;
  animation: cloud 2.5s linear infinite reverse;
}

.cloudThree {
  top:250px;
  left:50px;
  animation: cloud 2.8s linear infinite reverse;
}

.cloudOne:before, .cloudTwo:before, .cloudThree:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 12.5px;
  background-color: #fff;
  border-radius:100px 100px 0 0;
  left:-20px;
  top:12.5px;
  box-shadow: 65px 0 #fff;
}
CSS Paper plane animation

Step3.

Add CSS Animation

For the paper plane:

@keyframes move {
  0% {transform: translateY(0) rotateX(0);}
  25% {transform: translateY(-30px) rotateX(40deg);}
  50% {transform: rotateX(0) translateY(0);}
  75% {transform: rotateX(-40deg) translateY(30px);}
  100% {transform: rotateX(0) translateY(0);}
}

To move clouds:

@keyframes cloud {  
  from{ 
    left:-150px; 
  }
  to{ 
    left: 400px; 
  }
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Plane Animation

CSS Cyclist /Bike Animation

CSS Bubble Animation

Categories
Adobe Illustrator

How to draw a paper plane in Adobe Illustrator?

In this quick tutorial, you’ll learn how to draw a paper plane in Adobe Illustrator CC. Follow the steps below and watch the video tutorial to create your own paper plane!

Paper plane tutorial

Step1.

Create a new document. Use Rectangle Tool and select the whole background. Fill the square a blue colour.

paper plane adobe illustrator

Go to the layer panel and lock the first layer.

paper plane adobe illustrator

Step2.

Create the new layer and by using a Pen Tool draw a triangle, and fill the shape white.

paper plane in illustrator

Create a new layer and draw a small triangle in a dark grey colour.

paper plane illustrator

Create a new layer and using the Pen Tool the shape below. Fill the shape in a light grey colour.

paper plane adobe illustrator

Create a new layer and draw another white triangle.

paper plane vector image

The paper plane is ready!

Watch also the video tutorial:

Hey, here’s something that might interest you:

How to wrap your text around a circle/ square in Adobe Illustrator?

How to draw Easter eggs in Adobe Illustrator?

How to make a doughnut in Adobe Illustrator?