Как заставить воспроизводиться анимацию, когда установлен переключатель? - PullRequest
Новая
       19

Как заставить воспроизводиться анимацию, когда установлен переключатель?

0 голосов
/ 03 мая 2018

Я попытался создать пользовательский переключатель, который меняет цвет, воспроизводит и анимацию при нажатии. Но я только смог сделать это с помощью hover, я попытался использовать «input: selected», но это не помогло

При наведении курсора на кнопку радио происходит анимация, но я хочу, чтобы анимация происходила при нажатии кнопки радио. Пожалуйста, помогите мне с этим !! 

body{
    margin: 0;
    padding: 0;
}
.choose{
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
    display: block;
    background: #262626;
    height: 209px;
}

.choose input{
    -webkit-appearance: none;
}

.choose #female{
    position: absolute;
    left: 65%;
}

.choose #male, #female{
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%,-50%);
    background: #ffffff;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: .5s;
    font-size: 24px;
    color: #262626;
}

.choose #male:hover{
    background: #3c81de;
    color: white;
}

.choose #female:hover{
    background: #f23895;
    color: white;
}

.choose #male .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #female .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #male .fas:hover{
    animation: manimate 7s;
}

@keyframes manimate{
    0%{
        box-shadow: 0 0 0 0 rgb(90, 168, 217)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}

.choose #female .fas:hover{
    animation: fanimate 7s;
}

@keyframes fanimate{
    0%{
        box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>mvrikxix's Arena</title>
    <link rel="stylesheet" href="PlaywithButtons.css">
    <link rel="icon" href="mvrikxix.png">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
    <div class="choose">
        <label>
            <input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
            <input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
        </label>
    </div>    
</body>    
</html>

Ответы [ 3 ]

0 голосов
/ 03 мая 2018

Чтобы использовать :checked, вам необходимо знать структуру HTML.

Например, кажется, что вы хотите стилизовать элементы <span> непосредственно после элементов <input>. Для этого может быть полезен комбинатор adjacent sibling или general sibling.

Я также завернул каждый input в свой label, чтобы сохранить их независимость. 

body {
  margin: 0;
  padding: 0;
}

.choose {
  background: #262626;
  display: flex;
  justify-content: space-around;
  padding: 5% 0;
}

.choose input {
  display: none;
}

#male span,
#female span {
  display: block;
  background: #ffffff;
  width: 70px;
  height: 70px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: .5s;
  font-size: 24px;
  color: #262626;
}

#male input:checked+span {
  background: #3c81de;
  color: white;
}

#female input:checked+span {
  background: #f23895;
  color: white;
}

.choose .fas {
  display: block;
  line-height: 70px;
  border-radius: 50%;
}

#male input:checked+span .fas {
  animation: manimate 7s;
}

@keyframes manimate {
  0% {
    box-shadow: 0 0 0 0 rgb(90, 168, 217)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}

#female input:checked+span .fas {
  animation: fanimate 7s;
}

@keyframes fanimate {
  0% {
    box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">


<div class="choose">
  <label id="male">
    <input name="gender" type="radio">
    <span><i class="fas fa-mars"></i></span>
  </label>
  <label id="female">
    <input name="gender" type="radio">
    <span><i class="fas fa-venus"></i></span>
  </label>
</div>
0 голосов
/ 03 мая 2018

Полагаю, ваш подход был полностью в порядке. Это также отвечает на ваш вопрос (посмотрите код ниже). Этот код будет срабатывать только один раз после выбора одного из двух типов. Но это вызовет анимацию на самой радиокнопке, а не на иконке. Если вы проверите свой код в браузере с помощью некоторых инструментов разработчика, вы заметите, что ваши радиокнопки имеют размер 0x0, и они расположены в самом верхнем левом углу. Так что даже если вы активируете анимацию. Это будет не в том месте. Либо разместите радиокнопки прямо за значками и сделайте их одинакового размера, либо создайте триггер на самом значке. 

body{
    margin: 0;
    padding: 0;
}
.choose{
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
    display: block;
    background: #262626;
    height: 209px;
}

.choose input{
    -webkit-appearance: none;
}

.choose #female{
    position: absolute;
    left: 65%;
}

.choose #male, #female{
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%,-50%);
    background: #ffffff;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: .5s;
    font-size: 24px;
    color: #262626;
}

.choose #male:hover{
    background: #3c81de;
    color: white;
}

.choose #female:hover{
    background: #f23895;
    color: white;
}

.choose #male .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #female .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #male .fas:hover{
    animation: manimate 7s;
}

@keyframes manimate{
    0%{
        box-shadow: 0 0 0 0 rgb(90, 168, 217)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}

.choose #female .fas:hover{
    animation: fanimate 7s;
}

input[type="radio"]:checked{
    animation: fanimate 7s;
}

@keyframes fanimate{
    0%{
        box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>mvrikxix's Arena</title>
    <link rel="stylesheet" href="PlaywithButtons.css">
    <link rel="icon" href="mvrikxix.png">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
    <div class="choose">
        <label>
            <input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
            <input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
        </label>
    </div>    
</body>    
</html>
0 голосов
/ 03 мая 2018

Возможно, проблема в селекторе, который вы пытались использовать. Это должно работать: 

.choose input:checked + #male .fas {
  ...
}


body {
  margin: 0;
  padding: 0;
}

.choose {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0px;
  display: block;
  background: #262626;
  height: 209px;
}

.choose input {
  -webkit-appearance: none;
}

.choose #female {
  position: absolute;
  left: 65%;
}

.choose #male,
#female {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  width: 70px;
  height: 70px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: .5s;
  font-size: 24px;
  color: #262626;
}

.choose #male:hover {
  background: #3c81de;
  color: white;
}

.choose #female:hover {
  background: #f23895;
  color: white;
}

.choose #male .fas {
  display: block;
  line-height: 70px;
  border-radius: 50%;
}

.choose #female .fas {
  display: block;
  line-height: 70px;
  border-radius: 50%;
}

.choose #male .fas:hover {
  animation: manimate 7s;
}



@keyframes manimate {
  0% {
    box-shadow: 0 0 0 0 rgb(90, 168, 217)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}

.choose #female .fas:hover {
  animation: fanimate 7s;
}

@keyframes fanimate {
  0% {
    box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}

.choose input:checked + #male .fas {
  animation: manimate 7s;
}

.choose input:checked + #female .fas {
  animation: fanimate 7s;
}
<!DOCTYPE html>
<html>

<head>
  <title>mvrikxix's Arena</title>
  <link rel="stylesheet" href="PlaywithButtons.css">
  <link rel="icon" href="mvrikxix.png">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>

<body>
  <div class="choose">
    <label>
            <input type="radio"><span id="male"><i class="fas fa-mars"></i></span>
            <input type="radio"><span id="female"><i class="fas fa-venus"></i></span>
        </label>
  </div>
</body>

</html>
...