ایجاد افکت جالب برای پس زمینه سایت

آدرس کوتاه این صفحه : https://darkoobedu.ir/?p=3291

با استفاده از کدهای زیر می توانید افکت جالبی برای پس زمینه وب سایت خود ایجاد کنید. برای دانلود عکس های استفاده شده در این افکت بر روی دانلود عکس کلیک کنید.

دانلود عکس

 

<!DOCTYPE html>
<html>
    <head>
        <title>
                    دارکــــوب
            </title>
            <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        
    <section>
    <h2>
     طراحی سایت دارکــــوب
      </h2>
  </div>
     <div class="leaf">
     <div>  <img src="./images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="./images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="./images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="./images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
       <div> <img src="./images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="./images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
     <div><img src="./images/autumn_leaves_025.png" height="75px" width="75px"></div>
            
     </div>
     
     <div class="leaf leaf1">
     <div>  <img src="./images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="./images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="./images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="./images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
       <div> <img src="./images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="./images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
     <div><img src="./images/autumn_leaves_025.png" height="75px" width="75px"></div>
            
     </div>
     
     <div class="leaf leaf2">
     <div>  <img src="./images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="./images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="./images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="./images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>

       <div> <img src="./images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="./images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
     <div><img src="./images/autumn_leaves_025.png" height="75px" width="75px"></div>
            
     </div>
     </section>

    </body>
</html>
body {
margin:0;
padding:0;
overflow:hidden;
background-color:black; font-family: IRANSans;
}
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%;
        transform:translateX (20px) rotate(0deg);
    }
    20%{
        opacity:0.8;
        transform:translateX (-20px) rotate(45deg);
    }
    40%{

        transform:translateX (-20px) rotate(90deg);
    }
    60%{
        
       transform:translateX (-20px) rotate(135deg); 
    }
    80%{
    
        transform:translateX (-20px) rotate(180deg);
    }
    100%{
        
        top:110%;
        transform:translateX (-20px) rotate(225deg);
    }
    }
.leaf1{
    transform: rotateX(180deg);
}
h2{
    position:absolute ;
    top:40%;
    width:100%;
   font-family: IRANSans;
    font-size:3em;
    text-align:center;
    transform:translate ;
    color:#fff;
    transform:translateY (-50%);
}