Başlık yok

ShopNak
ShopNak
Ocak 27, 2022
0

 <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"> Welcome !! </h1>
                <h1 class="two"> Logo Designs </h1>
                <h1 class="three"> Graphics Designs </h1>
                <h1 class="four"> Web Designs </h1>
                
                <p class="one"> You are welcome to Aptech Designers, designed by Pratik from Nepal. </p>
                <p class="two"> Creativity is my passion. Logo describes your details about company. </p>
                <p class="three"> Graphics Design needs vision to create yours unique digital concept. </p>
                <p class="four"> Responsive and All Browser Compatible Dynamic Web Layouts our target. </p>
            </div>
        </div>
Diğer uygulamalarla paylaşın

Yorum Gönder

0 Yorumlar
*Sualınız olarsa rəy yazıb məlumat ala bilərsiniz
Yorum Gönder (0)
Yuxarı çıx