چطور می تونم کمک کنم؟
ایجاد افکت جالب برای پس زمینه سایت
- نویسنده: بهاره خلج (دانش آموز)
- بازبینی شده توسط: بهاره خلج (دانش آموز)
- بروزرسانی:
- 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%);
}
دیدگاهتان را بنویسید