Как сделать такие же эффекты css?

Question

[anton_trofimov95]

Здравствуйте. Как сделать такие эффекты?
1. Белая штука на кнопке и мерцание от фотки - shvedstenka24.ru
2. Мерцание от фотки. Если делать мерцание фотки, оно идет не от центра. И как сделать такое большое? - hmros.ru
3. И вот такое мерцание кнопки - https://wolfskill.ru/game/1/

Comments

[snap44]

Это больше на задание похоже, чем на вопрос.

[Hyubert]

Ну вы можете открыть отладчик и посмотреть, например:
3. Мерцание кнопки - для ссылки с класом .button задан псевдоелемент after который имеет такие свойства

.button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 22px;
  -webkit-animation: wow 2s infinite;
  animation: wow 2s infinite;
}

и сама анимация

@keyframes wow {
  0% {
     -webkit-transform: scale(1);
     transform: scale(1);
     opacity: 1;
  }
  100% {
     -webkit-transform: scale(1.3);
     transform: scale(1.3);
     opacity: 0.1;
  }
}

[Hyubert]

Если не забуду, позже разберу и другие анимации

[alex-1917]

Hyubert, пожалуй, подпишусь на ваши уроки... )))

Answer 1

[Alexander]

Ну так через панель разработчика можно увидеть как такое сделали.

Answer 2

[Василий Васильев]

Белая штука на кнопке:
Кнопка relative, за ней :after блок абсолютом, transform:rotate(45deg) и анимация сдвига вправо.

Пульсация еще проще: 3 блока(можно один + :before & :after) без заливки с бордером, анимируется скалирование (scale(1.3)). Мерцание кнопки - аналогично.