طراحی سایت در کرج|شرکت طراحی سایت|سئو در کرج|طراحی اپلیکشن موبایل

برای مشاهده بخش خدمات طراحی سایت به سمت پایین اسکرول کنید

نسل جدید بنر ها css3

نسل جدید بنر ها css3Reviewed by مهدی اخوان on Jul 20Rating:

سلام خیلی وقت است که اکثر بنر ها با فرمت های gif یا swf تولید میشود و شاید دیگر زمان سی اس اس که پا در این عرصه بزرگ تبلیغاتی بگذارد که مزایای جالبی دارد و همچنین معایبی هم دارد.

مزایا:

زمان لود سریع

کیفیت بالا

تغییر در نوشته ها به سادگی

و…

معایب

باید حتما به css3 مسلط باشید

ابتدا یک فایل Html بسازید و سپس یک استایل سی اس اس و در آخر آن ها را به هم متصل کنید.

 

کد html

Source code نسل جدید بنر ها css3 نسل جدید بنر ها css3 نسل جدید بنر ها css3 
<div class="p2g"><div id="plus2">گروپ دیزاین</div><div id="arman">طراحی سایت در کرج</div></div>

 

کدcss3

Source code نسل جدید بنر ها css3 نسل جدید بنر ها css3 نسل جدید بنر ها css3 
.p2g, .arman, .plus2{
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
transition:all 1s ease-in; 
}
.p2g{
width:۵۰۰px;
height:۸۰px;
background-image: -ms-linear-gradient(top, #۸F8F8F 0%, #292828 100%);
background-image: -moz-linear-gradient(top, #۸F8F8F 0%, #292828 100%);
background-image: -o-linear-gradient(top, #۸F8F8F 0%, #292828 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(۰, #۸F8F8F), color-stop(1, #292828));
background-image: -webkit-linear-gradient(top, #۸F8F8F 0%, #292828 100%);
background-image: linear-gradient(top, #۸F8F8F 0%, #292828 100%);
-webkit-border-radius: ۵px;
-moz-border-radius: ۵px;
border-radius: ۵px;
box-shadow: 0px 0px 5px 1px #۴۱۴۱۴۱;
font-family: "B Yekan",Arial, Helvetica, Sans-Serif;
padding:۰;
margin:۵px;
overflow:hidden;
}
.p2g #arman{
padding:۵px;
font-size:۱۵px;
color:#۰۰۰;
text-shadow:۲px 2px 1px #ffffff;
background:#۵۲D1EB;
-webkit-border-radius: ۵px;
-moz-border-radius: ۵px;
border-radius: ۵px;
width:۱۵۰px;
text-align:center;
margin:۵px -۱۷۰px 0 0px;
transform: rotate(-۲deg);
-o-transform: rotate(-۲deg);
-moz-transform: rotate(-۲deg);
-webkit-transform: rotate(-۲deg);
animation:arman 10s infinite;
-moz-animation:arman 10s infinite;
-webkit-animation:arman 10s infinite;
}
@keyframes arman{
۰% {margin:0px -۱۷۰px 0 0px;transform: rotate(-۲deg);}
۵% {margin:0px -۱۷۰px 0 0px;transform: rotate(۳۶۰deg);}
۱۰% {margin:0px 20px 0 0px;transform: rotate(-۲deg);}
۱۵% {margin:0px 20px 0 0px;transform: rotate(-۲deg);}
۲۰% {margin:0px 20px 0 0px;transform: rotate(-۲deg);}
۲۵% {margin:0px 20px 0 0px;transform: rotate(-۲deg);}
۳۰% {margin:0px 20px 0 0px;transform: rotate(-۲deg);}
۳۵% {margin:0px 20px 0 0px;transform: rotate(۳۶۰deg);}
۴۰% {margin:0px 280px 0 0px;transform: rotate(-۲deg);}
۴۵% {margin:0px 280px 0 0px;transform: rotate(-۲deg);}
۵۰% {margin:0px 280px 0 0px;transform: rotate(-۲deg);}
۵۵% {margin:0px 280px 0 0px;transform: rotate(-۲deg);}
۶۰% {margin:0px 280px 0 0px;transform: rotate(-۲deg);}
۶۵% {margin:0px 280px 0 0px;transform: rotate(-۲deg);}
۷۰% {margin:0px 280px 0 0px;transform: rotate(۳۶۰deg);}
۷۵% {margin:0px 500px 0 0px;transform: rotate(-۲deg);}
۸۰% {margin:0px 500px 0 0px;transform: rotate(۳۶۰deg);}
۸۵% {margin:0px 20px 0 0px;transform: rotate(-۲deg);}
۹۰% {margin:0px 20px 0 0px;transform: rotate(-۲deg);}
۹۵% {margin:0px -۱۷۰px 0 0px;transform: rotate(-۲deg);}
}
@-webkit-keyframes arman{
۰% {margin:0px -۱۷۰px 0 0px;-webkit-transform: rotate(-۲deg);}
۵% {margin:0px -۱۷۰px 0 0px;-webkit-transform: rotate(۳۶۰deg);}
۱۰% {margin:0px 20px 0 0px;-webkit-transform: rotate(-۲deg);}
۱۵% {margin:0px 20px 0 0px;-webkit-transform: rotate(-۲deg);}
۲۰% {margin:0px 20px 0 0px;-webkit-transform: rotate(-۲deg);}
۲۵% {margin:0px 20px 0 0px;-webkit-transform: rotate(-۲deg);}
۳۰% {margin:0px 20px 0 0px;-webkit-transform: rotate(-۲deg);}
۳۵% {margin:0px 20px 0 0px;-webkit-transform: rotate(۳۶۰deg);}
۴۰% {margin:0px 280px 0 0px;-webkit-transform: rotate(-۲deg);}
۴۵% {margin:0px 280px 0 0px;-webkit-transform: rotate(-۲deg);}
۵۰% {margin:0px 280px 0 0px;-webkit-transform: rotate(-۲deg);}
۵۵% {margin:0px 280px 0 0px;-webkit-transform: rotate(-۲deg);}
۶۰% {margin:0px 280px 0 0px;-webkit-transform: rotate(-۲deg);}
۶۵% {margin:0px 280px 0 0px;-webkit-transform: rotate(-۲deg);}
۷۰% {margin:0px 280px 0 0px;-webkit-transform: rotate(۳۶۰deg);}
۷۵% {margin:0px 500px 0 0px;-webkit-transform: rotate(-۲deg);}
۸۰% {margin:0px 500px 0 0px;-webkit-transform: rotate(۳۶۰deg);}
۸۵% {margin:0px 20px 0 0px;-webkit-transform: rotate(-۲deg);}
۹۰% {margin:0px 20px 0 0px;-webkit-transform: rotate(-۲deg);}
۹۵% {margin:0px -۱۷۰px 0 0px;-webkit-transform: rotate(-۲deg);}
}
@-moz-keyframes arman{
۰% {margin:0px -۱۷۰px 0 0px;-moz-transform: rotate(-۲deg);}
۵% {margin:0px -۱۷۰px 0 0px;-moz-transform: rotate(۳۶۰deg);}
۱۰% {margin:0px 20px 0 0px;-moz-transform: rotate(-۲deg);}
۱۵% {margin:0px 20px 0 0px;-moz-transform: rotate(-۲deg);}
۲۰% {margin:0px 20px 0 0px;-moz-transform: rotate(-۲deg);}
۲۵% {margin:0px 20px 0 0px;-moz-transform: rotate(-۲deg);}
۳۰% {margin:0px 20px 0 0px;-moz-transform: rotate(-۲deg);}
۳۵% {margin:0px 20px 0 0px;-moz-transform: rotate(۳۶۰deg);}
۴۰% {margin:0px 280px 0 0px;-moz-transform: rotate(-۲deg);}
۴۵% {margin:0px 280px 0 0px;-moz-transform: rotate(-۲deg);}
۵۰% {margin:0px 280px 0 0px;-moz-transform: rotate(-۲deg);}
۵۵% {margin:0px 280px 0 0px;-moz-transform: rotate(-۲deg);}
۶۰% {margin:0px 280px 0 0px;-moz-transform: rotate(-۲deg);}
۶۵% {margin:0px 280px 0 0px;-moz-transform: rotate(-۲deg);}
۷۰% {margin:0px 280px 0 0px;-moz-transform: rotate(۳۶۰deg);}
۷۵% {margin:0px 500px 0 0px;-moz-transform: rotate(-۲deg);}
۸۰% {margin:0px 500px 0 0px;-moz-transform: rotate(۳۶۰deg);}
۸۵% {margin:0px 20px 0 0px;-moz-transform: rotate(-۲deg);}
۹۰% {margin:0px 20px 0 0px;-moz-transform: rotate(-۲deg);}
۹۵% {margin:0px -۱۷۰px 0 0px;-moz-transform: rotate(-۲deg);}
}
.p2g #plus2{
padding:۵px;
font-size:۱۵px;
color:#۰۰۰;
text-shadow:۲px 2px 1px #ffffff;
background:#F2D60B;
-webkit-border-radius: ۵px;
-moz-border-radius: ۵px;
border-radius: ۵px;
width:۲۵۰px;
text-align:center;
margin:۵px 500px 0px 0px;
transform: rotate(-۲deg);
-o-transform: rotate(-۲deg);
-moz-transform: rotate(-۲deg);
-webkit-transform: rotate(-۲deg);
animation:plus2 15s infinite;
-moz-animation:plus2 15s infinite;
-webkit-animation:plus2 15s infinite;
}
@keyframes plus2{
۰% {margin:۵px 500px 0px 0px;}
۵% {margin:۵px 500px 0px 0px;}
۱۰% {margin:۵px 20px 0px 0px;}
۱۵% {margin:۵px 20px 0px 0px;}
۲۰% {margin:۵px 20px 0px 0px;}
۲۵% {margin:۵px 20px 0px 0px;}
۳۰% {margin:۵px 150px 0px 0px;}
۳۵% {margin:۵px 150px 0px 0px;}
۴۰% {margin:۵px 100px 0px 0px;}
۴۵% {margin:۵px 150px 0px 0px;}
۵۰% {margin:۵px 200px 0px 0px;}
۵۵% {margin:۵px 200px 0px 0px;}
۶۰% {margin:۵px 200px 0px 0px;}
۶۵% {margin:۵px 200px 0px 0px;}
۷۰% {margin:۵px 20px 0px 0px;}
۷۵% {margin:۵px 20px 0px 0px;}
۸۰% {margin:۵px 40px 0px 0px;}
۸۵% {margin:۵px 40px 0px 0px;}
۹۰% {margin:۵px 20px 0px 0px;}
۹۵% {margin:۵px 500px 0px 0px;}
}
@-webkit-keyframes plus2{
۰% {margin:۵px 500px 0px 0px;}
۵% {margin:۵px 500px 0px 0px;}
۱۰% {margin:۵px 20px 0px 0px;}
۱۵% {margin:۵px 20px 0px 0px;}
۲۰% {margin:۵px 20px 0px 0px;}
۲۵% {margin:۵px 20px 0px 0px;}
۳۰% {margin:۵px 150px 0px 0px;}
۳۵% {margin:۵px 150px 0px 0px;}
۴۰% {margin:۵px 100px 0px 0px;}
۴۵% {margin:۵px 150px 0px 0px;}
۵۰% {margin:۵px 200px 0px 0px;}
۵۵% {margin:۵px 200px 0px 0px;}
۶۰% {margin:۵px 200px 0px 0px;}
۶۵% {margin:۵px 200px 0px 0px;}
۷۰% {margin:۵px 20px 0px 0px;}
۷۵% {margin:۵px 20px 0px 0px;}
۸۰% {margin:۵px 40px 0px 0px;}
۸۵% {margin:۵px 40px 0px 0px;}
۹۰% {margin:۵px 20px 0px 0px;}
۹۵% {margin:۵px 500px 0px 0px;}
}
@-moz-keyframes plus2{
۰% {margin:۵px 500px 0px 0px;}
۵% {margin:۵px 500px 0px 0px;}
۱۰% {margin:۵px 20px 0px 0px;}
۱۵% {margin:۵px 20px 0px 0px;}
۲۰% {margin:۵px 20px 0px 0px;}
۲۵% {margin:۵px 20px 0px 0px;}
۳۰% {margin:۵px 150px 0px 0px;}
۳۵% {margin:۵px 150px 0px 0px;}
۴۰% {margin:۵px 100px 0px 0px;}
۴۵% {margin:۵px 150px 0px 0px;}
۵۰% {margin:۵px 200px 0px 0px;}
۵۵% {margin:۵px 200px 0px 0px;}
۶۰% {margin:۵px 200px 0px 0px;}
۶۵% {margin:۵px 200px 0px 0px;}
۷۰% {margin:۵px 20px 0px 0px;}
۷۵% {margin:۵px 20px 0px 0px;}
۸۰% {margin:۵px 40px 0px 0px;}
۸۵% {margin:۵px 40px 0px 0px;}
۹۰% {margin:۵px 20px 0px 0px;}
۹۵% {margin:۵px 500px 0px 0px;}
}
مطالب مرتبط

FOLLOW US