<section>
    <h2>
       Idea Hack!
      </h2>
  </div>
   <div class="leaf leaf1">
     <div>  <img src="https://idea-hack.com/wp-content/uploads/2020/12/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="https://idea-hack.com/wp-content/uploads/2020/12/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="https://idea-hack.com/wp-content/uploads/2020/12/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
       <div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
     <div><img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
     </div>
     <div class="leaf leaf2">
     <div>  <img src="https://idea-hack.com/wp-content/uploads/2020/12/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="https://idea-hack.com/wp-content/uploads/2020/12/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="https://idea-hack.com/wp-content/uploads/2020/12/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
       <div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
     <div><img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
     </div>
     </section>
body {
	margin:0;
	padding:0;
	overflow:hidden;
	background-color:black;
}
section{
	height:100%;
	width:100%;
	position:absolute;  
	background:radial-gradient(#333,#000);
}
.leaf{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.leaf div {
	position:absolute;
	display:block;
}
.leaf div:nth-child(1) {
	left:20%; 
	animation:fall 15s linear infinite;
	animation-delay:-2s;
}
.leaf div:nth-child(2) {
	left:70%; 
	animation:fall 15s linear infinite;
	animation-delay:-4s;
}
.leaf div:nth-child(3) {
	left:10%; 
	animation:fall 20s linear infinite;
	animation-delay:-7s;
}
.leaf div:nth-child(4) {
	left:50%; 
	animation:fall 18s linear infinite; 
	animation-delay:-5s;
}
.leaf div:nth-child(5) {
	left:85%; 
	animation:fall 14s linear infinite;
	animation-delay:-5s;
}
.leaf div:nth-child(6) {
	left:15%; 
	animation:fall 16s linear infinite;
	animation-delay:-10s;
}
.leaf div:nth-child(7) {
	left:90%; 
	animation:fall 15s linear infinite;
	animation-delay:-4s;
}

@keyframes fall {
  0% {
		opacity:1;
		top:-10%;
   }
	20%{
		opacity:0.8;
	}
	100%{
		top:110%;
	}
}

.leaf1 {
	transform: rotateX(180deg);
}

h2 {
	position:absolute;
	top:40%;
	width:100%;
	font-family: 'Courgette', cursive;
	font-size:4em;
	text-align:center;
	transform:translate ;
	color:#fff;
	transform:translateY (-50%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.