How to create bird animation using HTML nd CSS | Codes are given in the comment

preview_player
Показать описание

  1. Coding Guru
Рекомендации по теме
DP Animation Maker 0:13:41

DP Animation Maker Ep. 05: Flying Bird Animation Tutorial + Photoshop Tricks

How to Make 0:06:48

How to Make a Kurzgesagt Video in 1200 Hours

Bird Flying Animation 0:20:08

Bird Flying Animation in After Effects Tutorial 2024

Flying Bird Animation 0:00:45

Flying Bird Animation In Mobile. #shorts #animation

CREATE a Stunning 0:09:46

CREATE a Stunning 3D Animated Bird in PowerPoint! | PowerPoint Presentation Topic Animation

Tutorial 6 - 0:12:58

Tutorial 6 - Bird Animation | Adobe Animate CC Tutorials

Flying Bird Animation 0:00:53

Flying Bird Animation in After Effects #aftereffects #tutorial

Flying Birds Animation 0:05:29

Flying Birds Animation In PowerPoint

Tropical AI Love 0:00:11

Tropical AI Love birds Animation - Nature Inspired #birds #animatedfilms

Bird Flight Animation 0:03:20

Bird Flight Animation Tutorial

Create a Simple 0:27:50

Create a Simple Vector Bird Animation in After Effects – Beginner-Friendly in 25 Minutes!

The World’s Easiest 0:00:59

The World’s Easiest Animation Tutorial #flipaclip #animation #howto

TUTORIAL: How to 0:00:26

TUTORIAL: How to animate the world around you!

Bird FLAP AND 0:01:27

Bird FLAP AND GLIDE Animation Tutorial

Flying Bird Animation 0:21:10

Flying Bird Animation In Adobe After Effects for Beginners- After Effects Tutorial - No Plugins.

Bird Animation Tutorial 0:14:39

Bird Animation Tutorial in After Effects

Bird Flying Gif 0:00:59

Bird Flying Gif Animation With Photoshop Tips and Tricks 2023

How to animate 0:00:19

How to animate lightning ⚡️from easy to difficult! #animation #procreate #lighning

How to Make 0:30:29

How to Make Bird Animation in Animate CC | 2D Animation in Hindi Tutorial | Adobe Animate Tutorial

How to Make 0:39:13

How to Make Bird Flying Animation in Animate CC | 2D Animation Hindi Tutorial | Animate CC Beginner

After Effects Tutorial 0:09:57

After Effects Tutorial - Bird Flying Animation Tutorial

flightless bird animation✨✨ 0:00:17

flightless bird animation✨✨ YouTube, it took me so long to make!! #art #animation

Birds Of A 0:00:19

Birds Of A Feather // Rainbow Factory // Animation MEME

How To Make 0:14:43

How To Make KURZGESAGT Style Bird Animation | After Effects Animation Tutorial

Комментарии
Автор

<html>
<body>
<style>
* {
margin: 0;
padding: 0;
}

:root {
--body: #ff533e;
--mouth:
--feather: #939393;
--beak-top: #e9581a;
--beak-down: #aa4c21;
--leg: #00adef;
--body-color: #e3edf7;
}

body {
background: var(--body-color);
font-family: sans-serif;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}

.container {
width: 400px;
height: 400px;
position: relative;
}

.body, .mouth, .feather, .tail, .beak, .mouth::before, .mouth::after, .leg, .leg::after, .leg::before {
position: absolute;
}
.body, .mouth, .feather, .beak, .mouth::before, .mouth::after {
border-radius: 50%;
}

.body {
top: 26px;
left: 50px;
height: 180px;
width: 200px;
transform: rotate(-17deg);
background: linear-gradient(to bottom, transparent 0%, transparent 20%, var(--body) 20%);
z-index: 2;
}

.mouth {
background: var(--mouth);
top: 20px;
left: -175px;
width: 100px;
height: 100px;
transform: rotate(-17deg);
z-index: 5;
animation: animate-mouth 1.5s forwards;
animation-delay: 2s;
}

@keyframes animate-mouth {
100% {
left: 175px;
}
}
.mouth::before {
content: "";
width: 30px;
height: 30px;
background: white;
position: absolute;
top: 20px;
left: 40px;
}
.mouth::after {
content: "";
width: 10px;
height: 10px;
background: black;
position: absolute;
top: 30px;
left: 55px;
animation: animate-eye 1s infinite;
animation-delay: 4s;
}

@keyframes animate-eye {
50% {
height: 5px;
}
}


.feather {
z-index: 4;
left: 44px;
top: -206px;
width: 150px;
height: 150px;
background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--feather) 50%);
transform: rotate(-17deg);
animation: animate-feather 1.5s forwards;
animation-delay: 2s;
}

@keyframes animate-feather {
100% {
top: -6px;
}
}

.tail {
width: 150px;
height: 60px;
background-color: var(--mouth);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
top: 92px;
left: 324px;
transform: rotate(-17deg);
z-index: 3;
animation: animate-tail 1.5s forwards;
animation-delay: 2s;
}
@keyframes animate-tail {
100% {
left: -24px;
}
}
.beak {
height: 100px;
width: 100px;
background: linear-gradient(to bottom, var(--beak-top) 0%, var(--beak-top) 15%, transparent 15% );
left: 224px;
top: 240px;
z-index: -1;
transform: rotate(-17deg);
animation: animate-beak 1.5s forwards;
animation-delay: 2s;
}
@keyframes animate-beak {
100% {
top: 40px;
}
}
.leg {
background: var(--leg);
height: 50px;
width: 10px;
border-radius: 10px;
top: 515px;
left: 125px;
transform: rotate(-15deg);
z-index: 1;
animation: animate-leg 1.5s forwards;
animation-delay: 2s;
}
@keyframes animate-leg {
100% {
top: 215px;
}
}
.leg::before {
bottom: -8px;
content: "";
width: 40px;
height: 9px;
background: var(--leg);
border-radius: 10px;
transform: rotate(15deg);
z-index: -1;
}
.leg::after {
top: -8px;
content: "";
width: 30px;
height: 9px;
background: var(--leg);
border-radius: 10px;
transform: rotate(-15deg);
z-index: -1;
}

</style>
<div class="container">
<div class="body"></div>
<div class="mouth"></div>
<div class="beak"></div>
<div class="feather"></div>
<div class="tail"></div>
<div class="leg"></div>
</div>
</body>
</html>

codingguru
join shbcf.ru