Как сделать анимацию как тут? https://amazing-rp.ru/ "Начать играть"
Подскажите как называется эффект, не обязательно давать решение. Работаю пока без JQ на чистом JS.
P.S. Пробовал гуглить "Пульсирующая кнопка", но это не то, что нужно
Как сделать анимацию как тут? 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>
-webkit-keyframes
Оскорбление чувств пользователей Firefox!
Commented
21 мар. 2018 в 13:26
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
тут не не за чем...