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

سلام

در مطلب قبلی اولین بنر رو گذاشته بودم ، در این قسمت بنر دوم رو قرار میدم که مانند بنر قبلی تمام و کمال به وسیله Html و Css طراحی شده است .

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

کد Html:

<div id="dl2">
	<ul class="dl">
		<li><a href="https://beporsam.ir">Beporsam.ir</a></li>
	</ul>
	<p id="my_banner">
		<a href="https://beporsam.ir">بپرسم</a>
	</p>
	<p id="my_banner1">
		<a href="https://beporsam.ir">مکانی برای آموزش و رفع مشکلات</a>
	</p>
</div>

کد Css:

<style type="text/css">
 #dl2{
  display:block;
  font-family: "B Yekan",Arial, Helvetica, Sans-Serif;
  padding: 10px 20px 10px 20px;
  margin:5px;
  background-image:url('https://beporsam.ir/wp-content/uploads/2016/05/1-comress.png');
  background-color:#0b121b;
  background-repeat:no-repeat;
  background-position:left center;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  width:438px;
  height:70px; 
  box-shadow: 0px 0px 5px 1px #3A3A3A;
  text-shadow: 0 0px 2px #726169;
  border: 2px solid #00bed3;
  overflow:hidden;
  color:#fff;
   }
   #dl2 ul.dl{
	width:210px;
	margin: -10px 80px 0px 100px;
	list-style:none;
}
   #dl2 ul.dl li{
   display:block;
	background: #00bed3;
	color: #fff;
	text-shadow: 0 1px 0 #363636;
	border-radius:0px 0px 5px 5px;
	box-shadow: 0px 0px 5px 1px #3A3A3A;
	padding: 5px;
	width:200px;
	text-align:center;
	font-size:16px;
}
#dl2 a{
	text-decoration:none;
	color:#fff;
	-webkit-transition:all 0.5s ease-in;
	-moz-transition:all 0.5s ease-in;
	-o-transition:all 0.5s ease-in;
	transition:all 0.5s ease-in;
}
#dl2 a:hover{
    color: transparent;
    text-shadow: 0px 0px 2px #c5e4f4;
	-moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    -webkit-transition:all 0.5s ease-in;
	-moz-transition:all 0.5s ease-in;
	-o-transition:all 0.5s ease-in;
	transition:all 0.5s ease-in;
}
#my_banner{
animation:my_banner 5s infinite;
-moz-animation:my_banner 5s infinite;
-webkit-animation:my_banner 5s infinite;
font-size:18px;
float:right;
}
@keyframes my_banner{
0%		{}
10%		{}
20%     {transform: scale(2);}
30%		{filter:alpha(opacity=0);opacity:0;}
40%     {transform: scale(2) rotate(360deg);}
50%     {transform: scale(2) rotate(-360deg);}
60%		{padding: 0px 80px 0px 0px;}
70%		{transform: scale(2);}
80%		{padding: 0px 70px 0px 0px;}
90%	    {transform: scale(2);}
}
@-webkit-keyframes my_banner{
0%		{}
10%		{}
20%     {-webkit-transform: scale(2);}
30%		{filter:alpha(opacity=0);opacity:0;}
40%     {-webkit-transform: scale(2) rotate(360deg);}
50%     {-webkit-transform: scale(2) rotate(-360deg);}
60%		{padding: 0px 80px 0px 0px;}
70%		{-webkit-transform: scale(2);}
80%		{padding: 0px 70px 0px 0px;}
90%	    {-webkit-transform: scale(2);}
}
@-moz-keyframes my_banner{
0%		{}
10%		{}
20%     {-moz-transform: scale(2);}
30%		{filter:alpha(opacity=0);opacity:0;}
40%     {-moz-transform: scale(2) rotate(360deg);}
50%     {-moz-transform: scale(2) rotate(-360deg);}
60%		{padding: 0px 80px 0px 0px;}
70%		{-moz-transform: scale(2);}
80%		{padding: 0px 70px 0px 0px;}
90%	    {-moz-transform: scale(2);}
}
#my_banner1{
animation:my_banner1 5s infinite;
-moz-animation:my_banner1 5s infinite;
-webkit-animation:my_banner1 5s infinite;
font-size:18px;
float:left;
text-shadow: 0 0px 5px #000;
margin:-15px 0 0 0;
padding:5px;
}
@keyframes my_banner1{
0%		{}
10%		{}
20%     {margin:-15px 0px 0px -190px;}
30%		{margin:-15px 0px 0px -190px;}
40%     {}
50%     {}
60%		{margin:-15px 0px 0px -190px;}
70%		{}
80%		{}
90%	    {}
}
@-webkit-keyframes my_banner1{
0%		{}
10%		{}
20%     {margin:-15px 0px 0px -190px;}
30%		{margin:-15px 0px 0px -190px;}
40%     {}
50%     {}
60%		{margin:-15px 0px 0px -190px;}
70%		{}
80%		{}
90%	    {}
}
@-moz-keyframes my_banner1{
0%		{}
10%		{}
20%     {margin:-15px 0px 0px -190px;}
30%		{margin:-15px 0px 0px -190px;}
40%     {}
50%     {}
60%		{margin:-15px 0px 0px -190px;}
70%		{}
80%		{}
90%	    {}
}
</style>

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

موفق باشید .