选中单选按钮时如何播放动画？
Posted
技术标签:
【中文标题】选中单选按钮时如何播放动画？【英文标题】：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>【问题讨论】：
【参考方案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>【讨论】：
以上是关于选中单选按钮时如何播放动画？的主要内容，如果未能解决你的问题，请参考以下文章