Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2020, 06:29
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 119

Как исправить пульсирующие кнопки?
Здравствуйте. Подскажите, как сделать, чтобы кнопки пульсировали не при наведении, а автоматически после загрузки страницы, не одновременно, а по очереди, и только по одному разу каждая?

body {font-family: 'Playfair Display', serif; margin: 0;}
.wrap {text-align: center;}
.container {
  display: inline-block;
}
 
.box {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 20px 50px 0;
}
.wrap:hover .box {
  -webkit-transform: scale(2);
  -ms-ransform: scale(2);
  transform: scale(2);
}
 
.box1 {
  background: #F9A88B;
  transition: 1s;
}
 
.box2 {
  background: #F9A88B;
  transition: 1s;
}
 
.box3 {
  background: #F9A88B;
  transition: 1s;
}


<div class="wrap">
 
  <div class="container">
  
    <div class="box1 box"></div>
  </div>
  
     <div class="container">
  
    <div class="box2 box"></div>
  </div>
  
  <div class="container">
  
    <div class="box3 box"></div>
  </div>
 
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2020, 07:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,050

Lefseq,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body {font-family: 'Playfair Display', serif; margin: 0;}
.wrap {text-align: center;}
.container {
  display: inline-block;
}

.box {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 20px 50px 0;
  animation: big 3s ease-in-out infinite;
}
.box1 {
  background: #F9A88B;
}

.box2 {
  background: #F9A88B;
  animation-delay: 1s;
}

.box3 {
  background: #F9A88B;
  animation-delay: 2s;
}
@keyframes big{
   0% {
      transform: scale(1);
   }
   20% {
      transform: scale(2);
   }
   30%{
      transform: scale(1);
   }

}

  </style>
</head>

<body>
<div class="wrap">

  <div class="container">

    <div class="box1 box"></div>
  </div>

     <div class="container">

    <div class="box2 box"></div>
  </div>

  <div class="container">

    <div class="box3 box"></div>
  </div>

</div>


</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как сделать проверку всех полей формы при нажатии кнопки sss2019 Общие вопросы Javascript 2 04.01.2014 00:00
Как запретить кнопки Назад/Вперед? khusamov Javascript под браузер 11 30.05.2013 16:25
как изменить масштаб кнопки Taurus1195 Общие вопросы Javascript 12 19.05.2011 17:24
Как сделать submit без самой кнопки submit shaltay jQuery 3 06.05.2011 14:36