2

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

Такого рода?

2 ответа 2

5

*{
  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>

4

Вот так)

.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>   

Ваш ответ

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

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