0

Как сделать анимацию как тут? https://amazing-rp.ru/ "Начать играть"

введите сюда описание изображения

Подскажите как называется эффект, не обязательно давать решение. Работаю пока без JQ на чистом JS.

P.S. Пробовал гуглить "Пульсирующая кнопка", но это не то, что нужно

1
  • Это на чистом css тоже можно реализовать, JS или JQ тут не не за чем...
    – Air
    Commented 21 мар. 2018 в 13:11

2 ответа 2

4

Это простая 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>

1
  • 2
    -webkit-keyframes Оскорбление чувств пользователей Firefox!
    – andreymal
    Commented 21 мар. 2018 в 13:26
2

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.