Как сделать анимацию как тут? https://amazing-rp.ru/ "Начать играть"
Подскажите как называется эффект, не обязательно давать решение. Работаю пока без JQ на чистом JS.
P.S. Пробовал гуглить "Пульсирующая кнопка", но это не то, что нужно
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак сделать анимацию как тут? https://amazing-rp.ru/ "Начать играть"
Подскажите как называется эффект, не обязательно давать решение. Работаю пока без JQ на чистом JS.
P.S. Пробовал гуглить "Пульсирующая кнопка", но это не то, что нужно
Это простая CSS
анимация, подробно с примерами ТУТ
.button{
width: 200px;
padding: 20px 0;
margin: 30px auto 0;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(41, 41, 41, 0.88);
color: #e6a833;
-webkit-animation-name: 'play_down';
-moz-animation-name: 'play_up';
animation-duration: 1s;
animation-iteration-count: infinite;
box-shadow: 0 0 0 3px rgba(0, 0, 0,.5);
cursor: pointer;
}
@keyframes play_top {
0%
{
-webkit-box-shadow: 0 0 rgba(0,163,182,.6);
-moz-box-shadow: 0 0 rgba(0,163,182,.6);
box-shadow: 0 0 rgba(0,163,182,.6);
}
to
{
-webkit-box-shadow: 0 0 0 20px rgba(0,163,182,0);
-moz-box-shadow: 0 0 0 20px rgba(0,163,182,0);
box-shadow: 0 0 0 20px rgba(0,163,182,0);
}
}
@keyframes play_down {
0%
{
-webkit-box-shadow: 0 0 rgba(55,55,55,.6);
-moz-box-shadow: 0 0 rgba(55,55,55,.6);
box-shadow: 0 0 rgba(55,55,55,.6);
}
to
{
-webkit-box-shadow: 0 0 0 20px rgba(55,55,55,0);
-moz-box-shadow: 0 0 0 20px rgba(55,55,55,0);
box-shadow: 0 0 0 20px rgba(55,55,55,0);
}
}
<div class="button"><h1>Кнопка</h1></div>
body {
background: #222;
}
div {
width: 150px;
height: 40px;
margin: 50px;
background: rgba(255, 141, 1, .7);
animation: shadow 1s ease infinite;
}
@keyframes shadow {
0% {
box-shadow: 0 0 0 0 rgba(55, 141, 250, .8);
}
100% {
box-shadow: 0 0 0 20px rgba(55, 141, 250, 0);
}
}
<div></div>
css
тоже можно реализовать,JS или JQ
тут не не за чем...