0

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

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

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

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

1
  • Это на чистом css тоже можно реализовать, JS или JQ тут не не за чем...
    – Air
    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
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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