选中单选按钮时如何播放动画？答案

【问题标题】：How to make the animation play when the radio button is checked?选中单选按钮时如何播放动画？
【发布时间】：2018-10-13 02:12:53
【问题描述】：

我尝试制作一个自定义单选按钮，单击该按钮时会改变颜色、播放和动画。但是我只能通过悬停来做到这一点，我尝试使用“输入：检查”但它几乎没有用

当我将鼠标悬停在单选按钮上时，会发生动画，但我希望在单击单选按钮时发生动画。请帮我解决这个问题！

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>

【问题讨论】：

标签： html css radio-button css-animations html-input

【解决方案1】：

您尝试的选择器可能有问题。这应该有效：

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

【讨论】：

【解决方案2】：

为了使用:checked，您需要了解 HTML 结构。

例如，您似乎想在<input> 元素之后直接设置<span> 元素的样式。 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>

【讨论】：

感谢您帮助我：D。从你的代码中学到了很多关于 :checked 的知识。

【解决方案3】：

我猜你的方法完全没问题。这也回答了你的问题（看看下面的代码）。选择两种类型之一后，此代码将仅触发一次。但这将触发单选按钮本身而不是图标上的动画。如果您使用一些开发工具在浏览器中检查您的代码，您会注意到您的单选按钮的大小为 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>

【讨论】：