<style>
#slider{
width: 900px;
height: 290px;
border: 5px solid white;
box-shadow: 0px 0px 5px #bbb;
overflow: hidden;
margin: 0 auto;
padding: 0px;
}
figure{
/*width: 3615px;*/
width: 1850px;
height: 290px;
margin: 0px;
padding: 0px;
position: relative;
animation: pdslider 20s linear infinite;
}
@keyframes pdslider{
0%{left: 0; top: 0;}
23%{left: 0; top: 0;}
25%{left: -905px; top: 0;}
48%{left: -905px; top: 0;}
50%{left: -905px; top: -295px;}
73%{left: -905px; top: -295px;}
75%{left: 0; top: -295px;}
98%{left: 0; top: -295px;}
100%{left: 0; top: 0;}
}
.bglayer{
width: 370px;
height: 120px;
background: rgba(65,167,222,0.3);
padding: 15px;
position:relative;
animation: bglayer 20s linear infinite;
z-index: 1000;
border-radius: 10px;
}
@keyframes bglayer{
0%{left: 20px; top: 0; visibility:hidden;}
2%{left: 20px; top: -220px; visibility:visible;}
23%{left: 20px; top: -220px; visibility:visible;}
25%{left: 20px; top: -500px; visibility:hidden;}
27%{left: 20px; top: -220px; visibility:visible;}
48%{left: 20px; top: -220px; visibility:visible;}
50%{left: -500px; top: -500; visibility:hidden;}
52%{left: 20px; top: -220px; visibility:visible;}
73%{left: 20px; top: -220px; visibility:visible;}
75%{left: 500px; top: -500px; visibility:hidden;}
77%{left: 20px; top: -220px; visibility:visible;}
98%{left: 20px; top: -220px; visibility:visible;}
100%{left: 20px; top: 0; visibility:hidden;}
}
.bglayer h1{
color: #FF0;
position:relative;
text-shadow:0px -5px 5px #CCCCCC;
z-index: 1000;
}
.bglayer h1.one{
animation: header1 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer h1.two{
animation: header2 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer h1.three{
animation: header3 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer h1.four{
animation: header4 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
@keyframes header1{
0%{left: 20px; top: 0; opacity:0;}
2%{left: 20px; top: -500px; opacity:1;}
4%{left: 20px; top: 0px;; opacity:1;}
23%{left: 20px; top: 0px; opacity:1;}
24%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes header2{
0%{left: 20px; top: 0; opacity:0;}
25%{left: -20px; top: 500px; opacity:0;}
27%{left: -200px; top: 0px; opacity:0;}
29%{left: 20px; top: 0px; opacity:1;}
48%{left: 20px; top: 0px; opacity:1;}
49%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes header3{
0%{left: 20px; top: 0; opacity:0;}
50%{left: 500px; top: 500px; opacity:0;}
52%{left: 20px; top: 200px; opacity:1;}
54%{left: 20px; top: 0px; opacity:1;}
73%{left: 20px; top: 0px; opacity:1;}
74%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes header4{
0%{left: 20px; top: 0; opacity:0;}
75%{left: 500px; top: -500; opacity:0;}
77%{left: 1000px; top: 0px; opacity:1;}
79%{left: 20px; top: 0px; opacity:1;}
98%{left: 20px; top: 0px; opacity:1;}
99%{opacity: 0;}
100%{left: 20px; top: 0; opacity:0;}
}
.bglayer p{
color: #FFF;
position:relative;
margin: 0;
padding: 0;
text-shadow:0px -5px 5px #CCCCCC;
font-weight:bold;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
z-index: 1000;
}
.bglayer p.one{
animation: paragraph1 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer p.two{
animation: paragraph2 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer p.three{
animation: paragraph3 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer p.four{
animation: paragraph4 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
@keyframes paragraph1{
0%{left: 20px; top: 0; opacity:0;}
2%{left: 20px; top: -500px; opacity:0;}
4%{left: 1000px; top: 70px; opacity:0;}
6%{left: 20px; top: 70px;; opacity:1;}
23%{left: 20px; top: 70px; opacity:1;}
24%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes paragraph2{
0%{left: 20px; top: 0; opacity:0;}
25%{left: -20px; top: 500px; opacity:0;}
27%{left: 20px; top: -5000px; opacity:0;}
29%{left: 20px; top: -500px; opacity:0;}
31%{left: 20px; top: 70px; opacity:1;}
48%{left: 20px; top: 70px; opacity:1;}
49%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes paragraph3{
0%{left: 20px; top: 0; opacity:0;}
50%{left: 500px; top: 500px; opacity:0;}
52%{left: 20px; top: 200px; opacity:0;}
54%{left: -1000px; top: 70px; opacity:0;}
56%{left: 20px; top: 70px; opacity:1;}
73%{left: 20px; top: 70px; opacity:1;}
74%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes paragraph4{
0%{left: 20px; top: 0; opacity:0;}
75%{left: 500px; top: -500; opacity:0;}
77%{left: 1000px; top: 0px; opacity:0;}
79%{left: 1000px; top: 500px; opacity:0;}
81%{left: 20px; top: 70px; opacity:1;}
98%{left: 20px; top: 70px; opacity:1;}
99%{opacity: 0;}
100%{left: 20px; top: 70px; opacity:0;}
}
</style>
<div id="slider">
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0aVXG2qSMqUL420iwe8xeRpu4SkcVRIzTwTBt8PwSrgPLJYiRPmYoO-ZOQSBhTwYtDabiCNU0vuzEfgdaOsiDt_S-piT_WAxu2BH9B-LfIOotuop2n7wr67Kos-n3G2QtTamgOKdHxYEd/s16000/banner3.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZagRU71J9cgjpc394Othkf3DXSPMh2t0GhARxK4ANI3T8kGmUx5X3yloO8vOpA4VCwKRufdfJDIWYADEiBWwnRhEQni5HLKfdu4DCqFAIi4p_14BjUcM-XQ4S80_7BMEn0NRXnlZnezP/s16000/banner2.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVceJQCY_OYXc6obik6x80FqvHgemY9DPJ3ZBL8mUbGfOkt93x06Jx-_2V9y4GbEUFH1ZKzJF03tFiyXw8iJg7O9-8dJu5bfeOQnD0zWpasgc-EWnGASLaLoa8D6YRtat3O_lMEMzUpA1/s16000/banner1.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0aVXG2qSMqUL420iwe8xeRpu4SkcVRIzTwTBt8PwSrgPLJYiRPmYoO-ZOQSBhTwYtDabiCNU0vuzEfgdaOsiDt_S-piT_WAxu2BH9B-LfIOotuop2n7wr67Kos-n3G2QtTamgOKdHxYEd/s16000/banner3.jpg" />
</figure>
<div class="bglayer">
<h1 class="one"> Xoş Gəldiniz </h1>
<h1 class="two"> Kuponlar </h1>
<h1 class="three"> 1 KQ - 3.99$ </h1>
<h1 class="four"> Bank Komissiyası olmadan </h1>
<p class="one"> Bizi seçdiyiniz üçün təşəkkür edirik </p>
<p class="two"> Ay ərzində 500 TL və üzəri sifarişlərdə. </p>
<p class="three"> Çəki pulu təhvil alarkən qrama-qram hesablanır. </p>
<p class="four"> Sifariş edin razı qalın. </p>
</div>
</div>
