بنر متحرک با css – سری اول

سلام

در قسمت قبلی بنر سی اس اس ساده ای رو براتون قرار داده بودم ، در این قسمت میخوایم کمی بنرمون رو حرفه ای تر کنیم و متحرکش کنیم و رنگ و لعابی بهش بدیم 🙂

برای متحرک کردن عناصر باید با انیمیشن ها در css آشنا باشید ، که ما در این بنر از انیمیشن ها استفاده کردیم .

کد Html:

<div class="beporsam">
	<div id="plus2">
		<a href="https://beporsam.ir">مکانی برای یادگیری و رفع مشکلات</a>
	</div>
	<div id="sg">
	<a href="https://beporsam.ir">www.beporsam.ir</a>
	</div>
</div>

کد Css:

<style type="text/css">
.beporsam, .sg, .plus2{
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
transition:all 1s ease-in;	
}
.beporsam{
width:500px;
height:80px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
  background: #DEDEDE ;
  border:2px #fff dashed;
  box-shadow:0 0 2px 2px #c1c1c1;
font-family: "B Yekan",Arial, Helvetica, Sans-Serif;
padding:0;
margin:5px;
overflow:hidden;
}
.beporsam a{
color:#000;
border:none;
text-decoration:none;
}
.beporsam #sg{
padding:5px;
font-size:15px;
color:#000;
text-shadow:2px 2px 1px #ffffff;
background:#52D1EB;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:150px;
text-align:center;
margin:5px -170px 0 0px;
transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
animation:sg 10s infinite;
-moz-animation:sg 10s infinite;
-webkit-animation:sg 10s infinite;
}
@keyframes sg{
0% {margin:0px -170px 0 0px;transform: rotate(-2deg);}
5% {margin:0px -170px 0 0px;transform: rotate(360deg);}
10% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
15% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
20% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
25% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
30% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
35% {margin:0px 20px 0 0px;transform: rotate(360deg);}
40% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
45% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
50% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
55% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
60% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
65% {margin:0px 280px 0 0px;transform: rotate(-2deg);}
70% {margin:0px 280px 0 0px;transform: rotate(360deg);}
75% {margin:0px 500px 0 0px;transform: rotate(-2deg);}
80% {margin:0px 500px 0 0px;transform: rotate(360deg);}
85% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
90% {margin:0px 20px 0 0px;transform: rotate(-2deg);}
95% {margin:0px -170px 0 0px;transform: rotate(-2deg);}
}
@-webkit-keyframes sg{
0% {margin:0px -170px 0 0px;-webkit-transform: rotate(-2deg);}
5% {margin:0px -170px 0 0px;-webkit-transform: rotate(360deg);}
10% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
15% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
20% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
25% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
30% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
35% {margin:0px 20px 0 0px;-webkit-transform: rotate(360deg);}
40% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
45% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
50% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
55% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
60% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
65% {margin:0px 280px 0 0px;-webkit-transform: rotate(-2deg);}
70% {margin:0px 280px 0 0px;-webkit-transform: rotate(360deg);}
75% {margin:0px 500px 0 0px;-webkit-transform: rotate(-2deg);}
80% {margin:0px 500px 0 0px;-webkit-transform: rotate(360deg);}
85% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
90% {margin:0px 20px 0 0px;-webkit-transform: rotate(-2deg);}
95% {margin:0px -170px 0 0px;-webkit-transform: rotate(-2deg);}
}
@-moz-keyframes sg{
0% {margin:0px -170px 0 0px;-moz-transform: rotate(-2deg);}
5% {margin:0px -170px 0 0px;-moz-transform: rotate(360deg);}
10% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
15% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
20% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
25% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
30% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
35% {margin:0px 20px 0 0px;-moz-transform: rotate(360deg);}
40% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
45% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
50% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
55% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
60% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
65% {margin:0px 280px 0 0px;-moz-transform: rotate(-2deg);}
70% {margin:0px 280px 0 0px;-moz-transform: rotate(360deg);}
75% {margin:0px 500px 0 0px;-moz-transform: rotate(-2deg);}
80% {margin:0px 500px 0 0px;-moz-transform: rotate(360deg);}
85% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
90% {margin:0px 20px 0 0px;-moz-transform: rotate(-2deg);}
95% {margin:0px -170px 0 0px;-moz-transform: rotate(-2deg);}
}
.beporsam #plus2{
padding:5px;
font-size:15px;
color:#000;
text-shadow:2px 2px 1px #ffffff;
background:#F2D60B;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:250px;
text-align:center;
margin:5px 500px 0px 0px;
transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
animation:plus2 15s infinite;
-moz-animation:plus2 15s infinite;
-webkit-animation:plus2 15s infinite;
}
@keyframes plus2{
0% {margin:5px 500px 0px 0px;}
5% {margin:5px 500px 0px 0px;}
10% {margin:5px 20px 0px 0px;}
15% {margin:5px 20px 0px 0px;}
20% {margin:5px 20px 0px 0px;}
25% {margin:5px 20px 0px 0px;}
30% {margin:5px 150px 0px 0px;}
35% {margin:5px 150px 0px 0px;}
40% {margin:5px 100px 0px 0px;}
45% {margin:5px 150px 0px 0px;}
50% {margin:5px 200px 0px 0px;}
55% {margin:5px 200px 0px 0px;}
60% {margin:5px 200px 0px 0px;}
65% {margin:5px 200px 0px 0px;}
70% {margin:5px 20px 0px 0px;}
75% {margin:5px 20px 0px 0px;}
80% {margin:5px 40px 0px 0px;}
85% {margin:5px 40px 0px 0px;}
90% {margin:5px 20px 0px 0px;}
95% {margin:5px 500px 0px 0px;}
}
@-webkit-keyframes plus2{
0% {margin:5px 500px 0px 0px;}
5% {margin:5px 500px 0px 0px;}
10% {margin:5px 20px 0px 0px;}
15% {margin:5px 20px 0px 0px;}
20% {margin:5px 20px 0px 0px;}
25% {margin:5px 20px 0px 0px;}
30% {margin:5px 150px 0px 0px;}
35% {margin:5px 150px 0px 0px;}
40% {margin:5px 100px 0px 0px;}
45% {margin:5px 150px 0px 0px;}
50% {margin:5px 200px 0px 0px;}
55% {margin:5px 200px 0px 0px;}
60% {margin:5px 200px 0px 0px;}
65% {margin:5px 200px 0px 0px;}
70% {margin:5px 20px 0px 0px;}
75% {margin:5px 20px 0px 0px;}
80% {margin:5px 40px 0px 0px;}
85% {margin:5px 40px 0px 0px;}
90% {margin:5px 20px 0px 0px;}
95% {margin:5px 500px 0px 0px;}
}
@-moz-keyframes plus2{
0% {margin:5px 500px 0px 0px;}
5% {margin:5px 500px 0px 0px;}
10% {margin:5px 20px 0px 0px;}
15% {margin:5px 20px 0px 0px;}
20% {margin:5px 20px 0px 0px;}
25% {margin:5px 20px 0px 0px;}
30% {margin:5px 150px 0px 0px;}
35% {margin:5px 150px 0px 0px;}
40% {margin:5px 100px 0px 0px;}
45% {margin:5px 150px 0px 0px;}
50% {margin:5px 200px 0px 0px;}
55% {margin:5px 200px 0px 0px;}
60% {margin:5px 200px 0px 0px;}
65% {margin:5px 200px 0px 0px;}
70% {margin:5px 20px 0px 0px;}
75% {margin:5px 20px 0px 0px;}
80% {margin:5px 40px 0px 0px;}
85% {margin:5px 40px 0px 0px;}
90% {margin:5px 20px 0px 0px;}
95% {margin:5px 500px 0px 0px;}
}
</style>

دموی بنر هم قرار داده شد.

موفق باشید .