Birds Fly in the Sky By HTML, CSS Codes
HTML :-
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Bird Animation</title>
</head>
<body>
<div class="container">
<h1><br /><br><br><br><br><br><br><br>Beautiful Nature Picture by Maa Blogger</h1>
<div class="bird-container bird-container--one">
<div class="bird bird--one">
</div>
</div>
<div class="bird-container bird-container--two">
<div class="bird bird--two">
</div>
</div>
<div class="bird-container bird-container--three">
<div class="bird bird--three">
</div>
</div>
<div class="bird-container bird-container--four">
<div class="bird bird--four">
</div>
</div>
</div>
</body>
</html>
CSS :-
*,
*::before,
*::after
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1
{
font-family: 'harlow solid';
color: black;
font-size: 2.9rem;
letter-spacing: -3px;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
position: bottom;
z-index: 3;
}
.container
{
z-index: 1;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
//min-height: 35rem;
min-height: 100vh;
background-image: linear-gradient(to bottom, rgba(255, 168, 76, 0.6) 0%, rgba(255, 123, 13, 0.6) 100%), url("https://images.unsplash.com/photo-1463947628408-f8581a2f4aca?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
background-blend-mode: soft-light;
background-size: 100% 100%;
background-position: center center;
padding: 5rem;
}
.bird
{
background-image: url(bird-cells-new.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
}
.bird--one
{
animation-duration: 1s;
animation-delay: -0.5s;
}
.bird--two
{
animation-duration: 0.9s;
animation-delay: -0.75s;
}
.bird--three
{
animation-duration: 1.25s;
animation-delay: -0.25s;
}
.bird--four
{
animation-duration: 1.1s;
animation-delay: -0.5s;
}
.bird-container
{
position: absolute;
top: 20%;
left: -10%;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.bird-container--one
{
animation-duration: 15s;
animation-delay: 0;
}
.bird-container--two
{
animation-duration: 16s;
animation-delay: 1s;
}
.bird-container--three
{
animation-duration: 14.6s;
animation-delay: 9.5s;
}
.bird-container--four
{
animation-duration: 16s;
animation-delay: 10.25s;
}
@keyframes fly-cycle
{
100%
{
background-position: -900px 0;
}
}
@keyframes fly-right-one
{
0%
{
transform: scale(0.3) translateX(-10vw);
}
10%
{
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20%
{
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30%
{
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40%
{
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50%
{
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60%
{
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100%
{
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}
@keyframes fly-right-two
{
0%
{
transform: translateY(-2vh) translateX(-10vw) scale(0.5);
}
10%
{
transform: translateY(0vh) translateX(10vw) scale(0.4);
}
20%
{
transform: translateY(-4vh) translateX(30vw) scale(0.6);
}
30%
{
transform: translateY(1vh) translateX(50vw) scale(0.45);
}
40%
{
transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
}
50%
{
transform: translateY(0vh) translateX(90vw) scale(0.45);
}
51%
{
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
100%
{
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
}
Sky Screen :-
Posts
30 Comments
Great
ReplyDeleteAwesome
ReplyDeleteAmazing
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeleteFantastic
ReplyDeleteSuper
ReplyDeleteSuperb
ReplyDeletePerfect
ReplyDeleteBrilliant
ReplyDeletePerfect 👌
ReplyDeleteNice
ReplyDeleteBrilliant
ReplyDeleteAmazing
ReplyDeleteInteresting
ReplyDeleteInteresting
ReplyDeleteSuperb
ReplyDeleteSuperb
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌 Wow
ReplyDeleteAwesome
ReplyDeleteAmazing
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteWonderful
ReplyDeletePerfect
ReplyDelete