Как сделать мигающую кнопку на сайте? В начале страницы "получить доступ навсегда".
2 ответа
Покопавшись в исходниках, можно догадаться, что авторы сайта просто скопировали вот этот пример: https://codepen.io/oxla/pen/BRZjrY
Привожу его здесь по просьбе из комментариев
$('.ripplelink').each(function() {
var $this = $(this);
var ink, d, x, y;
setInterval(function() {
if($this.find(".ink").length === 0){
$this.prepend("<span class='ink'></span>");
}
ink = $this.find(".ink");
ink.removeClass("animate");
if(!ink.height() && !ink.width()){
d = Math.max($this.outerWidth(), $this.outerHeight());
ink.css({height: d, width: d});
}
x = Math.round(Math.random()*ink.width() - ink.width()/2);
y = Math.round(Math.random()*ink.height() - ink.height()/2);
ink.css({top: y+'px', left: x+'px'}).addClass("animate");
}, 3000)
});
.ibutton, a.ibutton {
background: #fdd82a;
font-family: 'Segoe UI', serif;
padding: 12px 30px;
color: #000000;
font-size: 20px;
text-decoration: none;
text-align: center;
display: inline-block;
width: auto;
border: none;
border-radius: 5px;
}
.ibutton:hover, .ibutton:focus {
background: #fdc42a;
text-decoration: none;
}
.ripplelink{
opacity: 1;
position: relative;
z-index: 0;
overflow: hidden;
}
.ripplelink .ink.animate{
opacity: 1;
}
.ink {
display: block;
position: absolute;
background:rgba(255, 255, 255, 0.3);
border-radius: 100%;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
z-index: 20;
}
.animate {
-webkit-animation:ripple 0.65s linear;
-moz-animation:ripple 0.65s linear;
-ms-animation:ripple 0.65s linear;
-o-animation:ripple 0.65s linear;
animation:ripple 0.65s linear;
}
@-webkit-keyframes ripple {
100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
100% {opacity: 0; -moz-transform: scale(2.5);}
}
@keyframes ripple {
100% {opacity: 0; transform: scale(2.5);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="ibutton ripplelink" href="#"><span class="ink animate"></span>Написать сообщение</a>
-
Не гарантирую, что это первоисточник, откуда копировали авторы сайта, но решение там описано отлично– wirtweltCommented 15 мар. 2018 в 6:24
-
код лучше в ответ вставить, через сниппет, следующая кнопка после вставки изображения. Commented 15 мар. 2018 в 15:53
.mig {
padding: 10px 20px 10px 20px;
border-radius: 5px;
font-size: 1.2em;
display: inline-block;
animation: anim 2s ease infinite;
font-weight: bold;
text-decoration: none;
color: white;
}
@keyframes anim {
0% {
background: red;
}
50% {
background: blue;
}
100% {
background: red;
}
}
<a href="#" class="mig">Супер мигающая кнопка</a>