This article is about how to create flying bird like twitter with CSS3. Create CSS for wings, eye, body separately then combine them.

Markup :

<div class="bird">
<div class="body1"></div>
<div class="body2"></div>
<div class="body3"></div>
<div class="body4"></div>
<div class="body5"></div>
<div class="wing">
<div class="wing1"></div>
<div class="wing2"></div>
<div class="wing3crop">
<div class="wing3"></div>
</div>
<div class="wing4"></div>
</div>
<div class="eye"></div>
</div>

CSS for bird's body :

.bird {
position: absolute;
background: transparent !important;
width: 33px;
height: 30px;
top:0px;
left:0px;
}
.bird .body1 {
top: 10px;
left: 1px;
width: 16px;
height: 19px;
-webkit-border-bottom-left-radius: 50px 60px;
-moz-border-radius-bottomleft: 50px 60px;
border-bottom-left-radius: 50px 60px;
}

.bird .body2 {
top: 17px;
left: 17px;
width: 12px;
height: 12px;
-webkit-border-bottom-right-radius: 50px 50px;
-moz-border-radius-bottomright: 50px 50px;
border-bottom-right-radius: 50px 50px;
}

.bird .body3 {
top: 12px;
left: 19px;
width: 13px;
height: 9px;
-webkit-border-top-right-radius: 50px 50px;
-moz-border-radius-topright: 50px 50px;
border-top-right-radius: 50px 50px;
-webkit-border-top-left-radius: 50px 50px;
-moz-border-radius-topleft: 50px 50px;
border-top-left-radius: 50px 50px;
}
.bird .body4 {
background: white !important;
z-index: 21 !important;
top: 1px;
left: 0px;
width: 26px;
height: 16px;
-webkit-border-bottom-right-radius: 50px 50px;
-moz-border-radius-bottomright: 50px 50px;
border-bottom-right-radius: 50px 50px;
-webkit-border-bottom-left-radius: 50px 50px;
-moz-border-radius-bottomleft: 50px 50px;
border-bottom-left-radius: 50px 50px;
}

.bird .body5 {
background: transparent !important;
top: 12px;
left: 22px;
width: 4px;
height: 1px;
border: 4px solid transparent;
border-bottom: 4px solid #f15a22;
}

CSS for wings :

.bird .wing {
background: transparent !important;
z-index: 22 !important;
width: 15px;
height: 18px;
bottom: 4px;
left: 8px;
-webkit-animation: 'flutter1' 0.2s linear;
-webkit-animation-iteration-count: infinite;
}
.bird .wing1 {
width: 12px;
height: 12px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.bird .wing2 {
width: 4px;
height: 12px;
margin-top: -6px;
-webkit-border-top-left-radius: 5px 15px;
-moz-border-radius-topleft: 5px 15px;
border-top-left-radius: 5px 15px;
}
.bird .wing3crop {
background: transparent !important;
overflow: hidden;
width: 4px;
height: 8px;
margin-top: -6px;
margin-left: 4px;
}
.bird .wing4 {
background: #fff;
width: 6px;
height: 7px;
margin-left: 3px;
margin-top: 3px;
-webkit-border-radius: 2px 6px;
-moz-border-radius: 2px 6px;
border-radius: 2px 6px;
}
.bird .wing3 {
background: transparent !important;
width: 10px;
height: 10px;
margin-top: -8px;
margin-left: -4px;
border: 4px solid #f15a22;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

CSS for Eye :

.bird .eye {
background: #fff !important;
top: 15px;
left: 26px;
width: 3px;
height: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

CSS Animation for wings :

@-webkit-keyframes flutter1 {
0% { -webkit-transform:rotate(0deg) }
50% { -webkit-transform:rotate(-40deg) }
100% { -webkit-transform:rotate(0deg) }
}

@-webkit-keyframes flutter2 {
0% { -webkit-transform:rotate(0deg) }
50% { -webkit-transform:rotate(40deg) }
100% { -webkit-transform:rotate(0deg) }
}

Read Also :

1. How to create Audio Waves with CSS3 
2. How to create Animated Rings with CSS3 
3. Create Flat Rotating Icon Buttons with CSS3 and jQuery 
4. Styling file input (type=file) with CSS and jQuery

2 comments:

  1. The work is very nice and it is containing more exciting information to the students at online. The writing work is given innovative types of information and helps for improving their subject of knowledge. The perfect writing method and powerful writers are available in our writing company. The scholarship essay writing service is maximizing the content as wonderful

    ReplyDelete
  2. oracle certification practice exams It’s very excellent information and more real facts to provided that post.Thank you for sharing this information.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts