بنر متحرک با 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: ۱۰px ۲۰px ۱۰px ۲۰px; margin:۵px; 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:۷px; -moz-border-radius:۷px; border-radius:۷px; width:۴۳۸px; height:۷۰px; box-shadow: 0px 0px ۵px ۱px #۳A3A3A; text-shadow: ۰ 0px ۲px #۷۲۶۱۶۹; border: ۲px solid #۰۰bed3; overflow:hidden; color:#fff; } #dl2 ul.dl{ width:۲۱۰px; margin: -۱۰px ۸۰px 0px ۱۰۰px; list-style:none; } #dl2 ul.dl li{ display:block; background: #۰۰bed3; color: #fff; text-shadow: ۰ ۱px ۰ #۳۶۳۶۳۶; border-radius:0px 0px ۵px ۵px; box-shadow: 0px 0px ۵px ۱px #۳A3A3A; padding: ۵px; width:۲۰۰px; text-align:center; font-size:۱۶px; } #dl2 a{ text-decoration:none; color:#fff; -webkit-transition:all ۰.۵s ease-in; -moz-transition:all ۰.۵s ease-in; -o-transition:all ۰.۵s ease-in; transition:all ۰.۵s ease-in; } #dl2 a:hover{ color: transparent; text-shadow: 0px 0px ۲px #c5e4f4; -moz-transition: all ۲۰۰ms linear; -o-transition: all ۲۰۰ms linear; -ms-transition: all ۲۰۰ms linear; transition: all ۲۰۰ms linear; -webkit-transition:all ۰.۵s ease-in; -moz-transition:all ۰.۵s ease-in; -o-transition:all ۰.۵s ease-in; transition:all ۰.۵s ease-in; } #my_banner{ animation:my_banner ۵s infinite; -moz-animation:my_banner ۵s infinite; -webkit-animation:my_banner ۵s infinite; font-size:۱۸px; float:right; } @keyframes my_banner{ ۰% {} ۱۰% {} ۲۰% {transform: scale(۲);} ۳۰% {filter:alpha(opacity=0);opacity:۰;} ۴۰% {transform: scale(۲) rotate(۳۶۰deg);} ۵۰% {transform: scale(۲) rotate(-۳۶۰deg);} ۶۰% {padding: 0px ۸۰px 0px 0px;} ۷۰% {transform: scale(۲);} ۸۰% {padding: 0px ۷۰px 0px 0px;} ۹۰% {transform: scale(۲);} } @-webkit-keyframes my_banner{ ۰% {} ۱۰% {} ۲۰% {-webkit-transform: scale(۲);} ۳۰% {filter:alpha(opacity=0);opacity:۰;} ۴۰% {-webkit-transform: scale(۲) rotate(۳۶۰deg);} ۵۰% {-webkit-transform: scale(۲) rotate(-۳۶۰deg);} ۶۰% {padding: 0px ۸۰px 0px 0px;} ۷۰% {-webkit-transform: scale(۲);} ۸۰% {padding: 0px ۷۰px 0px 0px;} ۹۰% {-webkit-transform: scale(۲);} } @-moz-keyframes my_banner{ ۰% {} ۱۰% {} ۲۰% {-moz-transform: scale(۲);} ۳۰% {filter:alpha(opacity=0);opacity:۰;} ۴۰% {-moz-transform: scale(۲) rotate(۳۶۰deg);} ۵۰% {-moz-transform: scale(۲) rotate(-۳۶۰deg);} ۶۰% {padding: 0px ۸۰px 0px 0px;} ۷۰% {-moz-transform: scale(۲);} ۸۰% {padding: 0px ۷۰px 0px 0px;} ۹۰% {-moz-transform: scale(۲);} } #my_banner1{ animation:my_banner1 ۵s infinite; -moz-animation:my_banner1 ۵s infinite; -webkit-animation:my_banner1 ۵s infinite; font-size:۱۸px; float:left; text-shadow: ۰ 0px ۵px #۰۰۰; margin:-۱۵px ۰ ۰ ۰; padding:۵px; } @keyframes my_banner1{ ۰% {} ۱۰% {} ۲۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۳۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۴۰% {} ۵۰% {} ۶۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۷۰% {} ۸۰% {} ۹۰% {} } @-webkit-keyframes my_banner1{ ۰% {} ۱۰% {} ۲۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۳۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۴۰% {} ۵۰% {} ۶۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۷۰% {} ۸۰% {} ۹۰% {} } @-moz-keyframes my_banner1{ ۰% {} ۱۰% {} ۲۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۳۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۴۰% {} ۵۰% {} ۶۰% {margin:-۱۵px 0px 0px -۱۹۰px;} ۷۰% {} ۸۰% {} ۹۰% {} } </style> |
دانلود + دموی بنر هم قرار داده شد.
موفق باشید .
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید