Winter Days Season Falling Leaf 🍃 🍃 🍃 🍃 🍃 🍃 By This Source Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>Maa Blogger</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section>
<h1>Falling Leaves</h1>
<div class="leaves">
<div><img src="https://www.transparentpng.com/thumb/leaves/Py6S1b-leaves-icon-clipart.png"></div>
<div><img src="https://www.transparentpng.com/thumb/leaves/Py6S1b-leaves-icon-clipart.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3571.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3592.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3604.png"></div>
</div>
<div class="leaves leaves2">
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3601.png"></div>
<div><img src="http://pic.90sjimg.com/design/00/59/79/86/59127302a4e0a.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3610.png"></div>
<div><img src="http://www.sclance.com/pngs/png-leaves/png_leaves_1067095.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3571.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3592.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3604.png"></div>
</div>
<div class="leaves leaves3">
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3601.png"></div>
<div><img src="http://pic.90sjimg.com/design/00/59/79/86/59127302a4e0a.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3610.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Free-Image.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3571.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3592.png"></div>
<div><img src="http://www.pngall.com/wp-content/uploads/5/Single-Plant-Leaf-PNG-Picture.png"></div>
<div><img src="http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3604.png"></div>
</div>
</section>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
overflow: hidden;
}
section{
position: absolute;
width: 100%;
height: 100%;
background: url(https://i.pinimg.com/originals/ca/a2/65/caa2654e79e2dc88c6a3c18e1a353452.jpg) center center fixed;
}
.leaves{
position: absolute;
width: 100%;
height: 100%;
}
.leaves div img {
width: 15%;
height: 8%;
animation: animateIMG 15s linear infinite
}
.leaves div {
position: absolute;
display: block;
}
.leaves div:nth-child(1) {
left:0%;
animation: leaves 15s linear infinite;
animation-delay: -3s;
}
.leaves div:nth-child(2) {
left:20%;
animation: leaves 15s linear infinite;
animation-delay: -5s;
}
.leaves div:nth-child(3) {
left:30%;
animation: leaves 15s linear infinite;
animation-delay: -8s;
}
.leaves div:nth-child(4) {
left:40%;
animation: leaves 15s linear infinite;
animation-delay: -4s;
}
.leaves div:nth-child(5) {
left:50%;
animation: leaves 15s linear infinite;
animation-delay: -6s;
}
.leaves div:nth-child(6) {
left:60%;
animation: leaves 15s linear infinite;
animation-delay: -7s;
}
.leaves div:nth-child(7) {
left:70%;
animation: leaves 15s linear infinite;
animation-delay: -5s;
}
.leaves div:nth-child(8) {
left:80%;
animation: leaves 15s linear infinite;
animation-delay: -9s;
}
.leaves div:nth-child(9) {
left:90%;
animation: leaves 15s linear infinite;
animation-delay: -1s;
}
@keyframes leaves {
0%{
top:-10%;
opacity: 1;
}
10%{
opacity: 1;
}
100% {
top: 100%;
}
}
@keyframes animateIMG {
0%{
transform :rotate(0deg);
}
20%{
transform :rotate(45deg);
}
40%{
transform :rotate(90deg);
}
60%{
transform :rotate(125deg);
}
80%{
transform :rotate(180deg);
}
100%{
transform :rotate(225deg);
}
}
.leaves2 {
transform: scale(2) rotateY(180deg);
filter:blur(2px);
}
.leaves3{
transform: scale(0.8) rotateX(180deg);
filter:blur(4px);
}
h1{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
letter-spacing: 8px;
z-index: 1;
}
OUTPUT Background
Posts
41 Comments
Wow nice
ReplyDeleteVery interesting
Wonderful
ReplyDeletePerfect 👌
ReplyDeleteAwesome
ReplyDeletePerfect 👌
ReplyDeleteExcellent
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteWow
ReplyDeletePerfect 👌
ReplyDeleteBrilliant
ReplyDeletePerfect 👌
ReplyDeleteExcellent
ReplyDeletePerfect 👌
ReplyDeleteInteresting
ReplyDeletePerfect 👌
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteAwesome
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteAwesome
ReplyDeleteWonderful
ReplyDeleteAmazing
ReplyDeleteSuper
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteAwesome
ReplyDeleteKallu nice
ReplyDeleteExcellent
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeletePerfect 👌
ReplyDeleteInteresting
ReplyDeleteExcellent
ReplyDeleteBrilliant
ReplyDeleteInteresting
ReplyDeleteAmazing
ReplyDeleteVery good
ReplyDelete