Пульсирующий круг CSS всегда сверху - PullRequest
0 голосов
/ 05 декабря 2018

Я уже давно занимаюсь этим, и я не могу понять, как это исправить.У меня есть один круг, который должен нажимать пользователь, и я хочу, чтобы за ним был еще один круг, который пульсирует.Когда круг BG не настроен на пульсацию, он отображается за основным кругом, но когда я установил его на пульсацию, он перемещается наверх.

    .mainClick{
      border-radius: 50%;
      background-color: rgba(75,75,75, 1);
      width: 150px;
      height: 150px;
      margin: 0 auto;
      transition: 0.5s;
      z-index: 2;
      margin-top: -185px;
    }
    
    
    
    .mainClick:hover{
      background-color: rgba(75,75,75, 0.1);
    }
    
    
    
    .dot {
      border: 50px solid rgba(100, 200, 100, 1);
      background: transparent;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      /*  -webkit-animation: pulse 3s ease-out;
      -moz-animation: pulse 3s ease-out;
      animation: pulse 3s ease-out;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      animation-iteration-count: infinite;*/
      margin: 0 auto;
      transition: 0.5s;
      z-index: 1;
    }
    
    @-moz-keyframes pulse {
     0% {
        -moz-transform: scale(0);
        opacity: 0.0;
     }
     25% {
        -moz-transform: scale(0);
        opacity: 0.1;
     }
     50% {
        -moz-transform: scale(0.1);
        opacity: 0.3;
     }
     75% {
        -moz-transform: scale(0.5);
        opacity: 0.5;
     }
     100% {
        -moz-transform: scale(1);
        opacity: 0.0;
     }
    }
    
    @-webkit-keyframes "pulse" {
     0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
     }
    
     25% {
        -webkit-transform: scale(0.5);
        opacity: 0.5;
     }
     100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
     }
    }
    <div class="dot"></div>
    <div class="mainClick"></div>

JSFIDDLE:

https://jsfiddle.net/a8cwo5ne/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...