Пульсирующая круглая кнопка

134
09 апреля 2019, 12:40

можете подсказать как сделать пульсирующую кнопку?

Такого рода?

Answer 1

*{ 
  box-sizing:border-box; 
} 
body{ 
  background-color:#cda; 
  text-align:center; 
  margin:0; 
  padding:40px 15px 0; 
} 
.annoying-btn{ 
  display:inline-block; 
  width:60px; 
  height:60px; 
  border-radius:50%; 
  border:10px solid rgba(255,255,255,.3); 
  background:radial-gradient(circle at center,#fff 10px ,rgba(255,255,255,.6) 10px); 
  background-clip:padding-box; 
  box-shadow:0 0 15px rgba(255,255,255,.4); 
  transform-origin:center; 
  animation:annoying .4s ease-in infinite alternate; 
} 
@keyframes annoying{ 
  from{ 
    transform:scale(1); 
  } 
  to{ 
    transform:scale(1.2); 
  } 
}
<div class="annoying-btn"></div>

Answer 2

Вот так)

.pilsing { 
 
    position: absolute; 
    z-index: 100; 
    width: 40px; 
    height: 40px; 
    left: 50%; 
    top: 50%; 
    margin: -20px 0 0 -20px; 
 
} 
.pilsing div:nth-child(1) { 
 
    animation: pulse 2s infinite; 
    -webkit-animation: pulse 2s infinite; 
    -moz-animation: pulse 2s infinite; 
    -o-animation: pulse 2s infinite; 
 
} 
.pilsing div:nth-child(2) { 
 
    animation: pulse 2s infinite .3s; 
    -webkit-animation: pulse 2s infinite .3s; 
    -moz-animation: pulse 2s infinite .3s; 
    -o-animation: pulse 2s infinite .3s; 
 
} 
.pilsing div { 
 
    border-radius: 50%; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 40px; 
    height: 40px; 
    border: 2px solid #fff; 
 
}@keyframes pulse{ 
    0%{ 
        transform:scale(.1); 
        -moz-transform:scale(.1); 
        -webkit-transform:scale(.1); 
        -o-transform:scale(.1); 
        -ms-transform:scale(.1); 
        opacity:0 
    } 
    50%{ 
        opacity:.4 
    } 
    100%{ 
        transform:scale(1.6); 
        -moz-transform:scale(1.6); 
        -webkit-transform:scale(1.6); 
        -o-transform:scale(1.6); 
        -ms-transform:scale(1.6); 
        opacity:0 
    } 
} 
@-webkit-keyframes pulse{ 
    0%{ 
        transform:scale(.1); 
        -moz-transform:scale(.1); 
        -webkit-transform:scale(.1); 
        -o-transform:scale(.1); 
        -ms-transform:scale(.1); 
        opacity:0 
    } 
    50%{ 
        opacity:.4 
    } 
    100%{ 
        transform:scale(1.6); 
        -moz-transform:scale(1.6); 
        -webkit-transform:scale(1.6); 
        -o-transform:scale(1.6); 
        -ms-transform:scale(1.6); 
        opacity:0 
    } 
} 
@-moz-keyframes pulse{ 
    0%{ 
        transform:scale(.1); 
        -moz-transform:scale(.1); 
        -webkit-transform:scale(.1); 
        -o-transform:scale(.1); 
        -ms-transform:scale(.1); 
        opacity:0 
    } 
    50%{ 
        opacity:.4 
    } 
    100%{ 
        transform:scale(1.6); 
        -moz-transform:scale(1.6); 
        -webkit-transform:scale(1.6); 
        -o-transform:scale(1.6); 
        -ms-transform:scale(1.6); 
        opacity:0 
    } 
} 
@-o-keyframes pulse{ 
    0%{ 
        transform:scale(.1); 
        -moz-transform:scale(.1); 
        -webkit-transform:scale(.1); 
        -o-transform:scale(.1); 
        -ms-transform:scale(.1); 
        opacity:0 
    } 
    50%{ 
        opacity:.4 
    } 
    100%{ 
        transform:scale(1.6); 
        -moz-transform:scale(1.6); 
        -webkit-transform:scale(1.6); 
        -o-transform:scale(1.6); 
        -ms-transform:scale(1.6); 
        opacity:0 
    } 
}
<body style="background: #000;"> 
<div class="pilsing"> 
      <div></div> 
      <div></div> 
   </div> 
</body>

READ ALSO
Border обтекающий фигуру
CSS

Border обтекающий фигуру

Существует ли у border свойство обтекающее фигуру не зависимо от заданных ширины и высоты? ЗЫ

 157
Не получаю данные из module.exports
javascript

Не получаю данные из module.exports

datajs

 123
Вставить символ на нужную позицию с помощью регулярных выражений
javascript

Вставить символ на нужную позицию с помощью регулярных выражений

Нужно вставить в определенное место строки символ, используя регулярные выраженияУ меня есть только символ для вставки и позиция на которую...

 111
Имя поля объекта через переменную
javascript

Имя поля объекта через переменную

Как задать имя поля объекта через переменную?

 132