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

نوشته شده توسط سرکار خانم خلج

آدرس کوتاه: https://sitedar.com/?p=8703

5/5 - (1 امتیاز)

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

کدها به صورت جداگانه نوشته شده و برای دانلود عکس ها بر روی دانلود عکس کلیک بفرمایید.

دانلود عکس

کد html

<!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>

کد css

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%);
}

اطلاعات تماس
شعبه 1 و آموزشگاه: تهران، سعادت آباد، چهار راه سرو، کوچه آریا، پلاک 4، طبقه 4، واحد 7
شعبه 2: تهران، سعادت آباد، ضلع جنوب غربی چهار راه سرو، پلاک 62، طبقه 5، واحد 12
تلفن ها: 02122083926 - 02122085386 - 02122082258 (9 الی 17 - پنج شنبه تا 13)
ایمیل: info@sitedar.com
اینستاگرام: darkoobwebdesign
افتخارات و مجوزها
  • جزو شرکت های خلاق معاونت علمی
  • عضو سازمان نظام صنفی رایانه ای
  • رتبه ۴ شورای عالی انفورماتیک
  • دارای مجوز آموزشگاه از فنی و حرفه ای
  • دارای مجوز نشر دیجیتال
  • دارای پروانه کانون آگهی و تبلیغاتی
  • پروانه کسب و کارهای مجازی
  • عضو انجمن کسب و کارهای اینترنتی
  • دارای نماد اعتماد الکترونیکی
پشتیبانی 24 ساعته 7 روز