بنر متحرک با 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 ۱s ease-in; -moz-transition:all ۱s ease-in; -o-transition:all ۱s ease-in; transition:all ۱s ease-in; } .beporsam{ width:۵۰۰px; height:۸۰px; -webkit-border-radius: ۵px; -moz-border-radius: ۵px; border-radius: ۵px; background: #DEDEDE ; border:۲px #fff dashed; box-shadow:۰ ۰ ۲px ۲px #c1c1c1; font-family: "B Yekan",Arial, Helvetica, Sans-Serif; padding:۰; margin:۵px; overflow:hidden; } .beporsam a{ color:#۰۰۰; border:none; text-decoration:none; } .beporsam #sg{ padding:۵px; font-size:۱۵px; color:#۰۰۰; text-shadow:۲px ۲px ۱px #ffffff; background:#۵۲D1EB; -webkit-border-radius: ۵px; -moz-border-radius: ۵px; border-radius: ۵px; width:۱۵۰px; text-align:center; margin:۵px -۱۷۰px ۰ 0px; transform: rotate(-۲deg); -o-transform: rotate(-۲deg); -moz-transform: rotate(-۲deg); -webkit-transform: rotate(-۲deg); animation:sg ۱۰s infinite; -moz-animation:sg ۱۰s infinite; -webkit-animation:sg ۱۰s infinite; } @keyframes sg{ ۰% {margin:0px -۱۷۰px ۰ 0px;transform: rotate(-۲deg);} ۵% {margin:0px -۱۷۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۱۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۱۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۲۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۲۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۳۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۳۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۴۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۴۵% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۵۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۵۵% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۶۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۶۵% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(-۲deg);} ۷۰% {margin:0px ۲۸۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۷۵% {margin:0px ۵۰۰px ۰ 0px;transform: rotate(-۲deg);} ۸۰% {margin:0px ۵۰۰px ۰ 0px;transform: rotate(۳۶۰deg);} ۸۵% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۹۰% {margin:0px ۲۰px ۰ 0px;transform: rotate(-۲deg);} ۹۵% {margin:0px -۱۷۰px ۰ 0px;transform: rotate(-۲deg);} } @-webkit-keyframes sg{ ۰% {margin:0px -۱۷۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۵% {margin:0px -۱۷۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۱۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۱۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۲۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۲۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۳۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۳۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۴۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۴۵% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۵۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۵۵% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۶۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۶۵% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۷۰% {margin:0px ۲۸۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۷۵% {margin:0px ۵۰۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۸۰% {margin:0px ۵۰۰px ۰ 0px;-webkit-transform: rotate(۳۶۰deg);} ۸۵% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۹۰% {margin:0px ۲۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} ۹۵% {margin:0px -۱۷۰px ۰ 0px;-webkit-transform: rotate(-۲deg);} } @-moz-keyframes sg{ ۰% {margin:0px -۱۷۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۵% {margin:0px -۱۷۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۱۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۱۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۲۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۲۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۳۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۳۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۴۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۴۵% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۵۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۵۵% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۶۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۶۵% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۷۰% {margin:0px ۲۸۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۷۵% {margin:0px ۵۰۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۸۰% {margin:0px ۵۰۰px ۰ 0px;-moz-transform: rotate(۳۶۰deg);} ۸۵% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۹۰% {margin:0px ۲۰px ۰ 0px;-moz-transform: rotate(-۲deg);} ۹۵% {margin:0px -۱۷۰px ۰ 0px;-moz-transform: rotate(-۲deg);} } .beporsam #plus2{ padding:۵px; font-size:۱۵px; color:#۰۰۰; text-shadow:۲px ۲px ۱px #ffffff; background:#F2D60B; -webkit-border-radius: ۵px; -moz-border-radius: ۵px; border-radius: ۵px; width:۲۵۰px; text-align:center; margin:۵px ۵۰۰px 0px 0px; transform: rotate(-۲deg); -o-transform: rotate(-۲deg); -moz-transform: rotate(-۲deg); -webkit-transform: rotate(-۲deg); animation:plus2 ۱۵s infinite; -moz-animation:plus2 ۱۵s infinite; -webkit-animation:plus2 ۱۵s infinite; } @keyframes plus2{ ۰% {margin:۵px ۵۰۰px 0px 0px;} ۵% {margin:۵px ۵۰۰px 0px 0px;} ۱۰% {margin:۵px ۲۰px 0px 0px;} ۱۵% {margin:۵px ۲۰px 0px 0px;} ۲۰% {margin:۵px ۲۰px 0px 0px;} ۲۵% {margin:۵px ۲۰px 0px 0px;} ۳۰% {margin:۵px ۱۵۰px 0px 0px;} ۳۵% {margin:۵px ۱۵۰px 0px 0px;} ۴۰% {margin:۵px ۱۰۰px 0px 0px;} ۴۵% {margin:۵px ۱۵۰px 0px 0px;} ۵۰% {margin:۵px ۲۰۰px 0px 0px;} ۵۵% {margin:۵px ۲۰۰px 0px 0px;} ۶۰% {margin:۵px ۲۰۰px 0px 0px;} ۶۵% {margin:۵px ۲۰۰px 0px 0px;} ۷۰% {margin:۵px ۲۰px 0px 0px;} ۷۵% {margin:۵px ۲۰px 0px 0px;} ۸۰% {margin:۵px ۴۰px 0px 0px;} ۸۵% {margin:۵px ۴۰px 0px 0px;} ۹۰% {margin:۵px ۲۰px 0px 0px;} ۹۵% {margin:۵px ۵۰۰px 0px 0px;} } @-webkit-keyframes plus2{ ۰% {margin:۵px ۵۰۰px 0px 0px;} ۵% {margin:۵px ۵۰۰px 0px 0px;} ۱۰% {margin:۵px ۲۰px 0px 0px;} ۱۵% {margin:۵px ۲۰px 0px 0px;} ۲۰% {margin:۵px ۲۰px 0px 0px;} ۲۵% {margin:۵px ۲۰px 0px 0px;} ۳۰% {margin:۵px ۱۵۰px 0px 0px;} ۳۵% {margin:۵px ۱۵۰px 0px 0px;} ۴۰% {margin:۵px ۱۰۰px 0px 0px;} ۴۵% {margin:۵px ۱۵۰px 0px 0px;} ۵۰% {margin:۵px ۲۰۰px 0px 0px;} ۵۵% {margin:۵px ۲۰۰px 0px 0px;} ۶۰% {margin:۵px ۲۰۰px 0px 0px;} ۶۵% {margin:۵px ۲۰۰px 0px 0px;} ۷۰% {margin:۵px ۲۰px 0px 0px;} ۷۵% {margin:۵px ۲۰px 0px 0px;} ۸۰% {margin:۵px ۴۰px 0px 0px;} ۸۵% {margin:۵px ۴۰px 0px 0px;} ۹۰% {margin:۵px ۲۰px 0px 0px;} ۹۵% {margin:۵px ۵۰۰px 0px 0px;} } @-moz-keyframes plus2{ ۰% {margin:۵px ۵۰۰px 0px 0px;} ۵% {margin:۵px ۵۰۰px 0px 0px;} ۱۰% {margin:۵px ۲۰px 0px 0px;} ۱۵% {margin:۵px ۲۰px 0px 0px;} ۲۰% {margin:۵px ۲۰px 0px 0px;} ۲۵% {margin:۵px ۲۰px 0px 0px;} ۳۰% {margin:۵px ۱۵۰px 0px 0px;} ۳۵% {margin:۵px ۱۵۰px 0px 0px;} ۴۰% {margin:۵px ۱۰۰px 0px 0px;} ۴۵% {margin:۵px ۱۵۰px 0px 0px;} ۵۰% {margin:۵px ۲۰۰px 0px 0px;} ۵۵% {margin:۵px ۲۰۰px 0px 0px;} ۶۰% {margin:۵px ۲۰۰px 0px 0px;} ۶۵% {margin:۵px ۲۰۰px 0px 0px;} ۷۰% {margin:۵px ۲۰px 0px 0px;} ۷۵% {margin:۵px ۲۰px 0px 0px;} ۸۰% {margin:۵px ۴۰px 0px 0px;} ۸۵% {margin:۵px ۴۰px 0px 0px;} ۹۰% {margin:۵px ۲۰px 0px 0px;} ۹۵% {margin:۵px ۵۰۰px 0px 0px;} } </style> |
دموی بنر هم قرار داده شد.
موفق باشید .
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید