ایجاد افکت برای دیو مثل سایت ایرانسل

[علیرضا5]

با سلام و درود فراوان گزینه ترابرد به ایرانسل در سایت ایرانسل

https://irancell.ir/Portal/Home/

یک افکت خیلی جالب داره
این افکت چطوری انجام شده

[mortezagt]

.div {

border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.div:hover {
box-shadow: 10px 12px 5px 0 rgba(0,0,0,.26);
border-radius: 2px;
}

[mortezagt]

این مهمه


-webkit-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

[علیرضا5]

اینکه خاصیت hover هست که حتما باید موس بره روی دیو شما یکبار به سایت ایراتسل نگاه کن ببین افکت ترابرد به ایرانسل چطوری کارمیکنه

[mortezagt]

اهان
من فکر کردم اون وسط صفحه رو میگی

ببین اگر سورس صفحه رو چک کنی یه چیزایی دستگیرت میشه
اینا رو من یافتم



<div class="mtn_btn">
<a href="#" id="mnp_button" class="hvr-ripple-out">ترابرد به ایرانسل</a>
</div>









.mtn_btn {
margin-top: 10px;
left: 15px;
text-align: initial;
width:300px
}
.mtn_btn a {
font-size: 16px;
color: #373737;
background-color: #FFBE00;
height: 40px;
line-height: 40px;
font-weight: 500;
display: inline-block;
padding-right: 25px;
padding-left: 25px;
}

.hvr-ripple-out::before, .hvr-ripple-out:focus::before, .hvr-ripple-out:active::before {
-webkit-animation-name: sigma-ripple-out;
animation-name: sigma-ripple-out;
}
.hvr-ripple-out::before {
content: '';
position: absolute;
border: #ffbe00 solid 5px;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation-duration: 1s;
animation-delay: 300ms;
display: inline-block;
}

@-webkit-keyframes sigma-ripple-out {
0% {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 1;
}

100% {
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
opacity: 0;
}
}

@keyframes sigma-ripple-out {
0% {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 1;
}

100% {
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
opacity: 0;
}
}

[mortezagt]

کافیه با جاوا یه interval بسازی و هر چند ثانیه یه بار کلاسhvr-ripple-outرو از mnp_button حذف و مجدد اذاف کنی
همین

[mortezagt]

اینطوری



var step=0;

$(document).ready(function () {


setInterval(function () {
if (step == 0) {
document.getElementById('mnp_button').setAttribute ("class", "hvr-ripple-out");
step = 1;
} else {
document.getElementById('mnp_button').removeAttrib ute("class");
step = 0;
}


}, 3000);


});

[mortezagt]

البته نمیدونم این کار چقدر مبتدی هستش
شاید دوستان راه بهتری بلد باشن

[علیرضا5]

خیلی جالب بود متشکرم فقط مشکلی که هست اینه که اون افکت رو دور صفحه میاره نه دور دیو

باتشکر

[mortezagt]

خیلی جالب بود متشکرم فقط مشکلی که هست اینه که اون افکت رو دور صفحه میاره نه دور دیو

باتشکر

استایلها رو دست کاری کن درست میشه