目前我正在构建一个 simon 游戏克隆，我想我想进行一些现代化改造。
无论如何，我找到了一篇关于如何仅使用 CSS3 制作切换开关的博客 (http://callmenick.com/post/css-toggle-switch-examples)
但是，由于我试图让这个网络响应，所以我制作了宽度为 100% 的容器(标签)。
我很难弄清楚如何使拨动开关本身在任何宽度的视口(viewport)中移向容器的末端。
body {
background: skyblue;
font-family: 'Righteous', cursive;
box-sizing: border-box; }
.container {
width: 100%;
display: flex;
flex-wrap: wrap; }
.game {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 70vh;
margin-top: 10px; }
.button {
position: relative;
display: block;
height: 50%;
width: 50%;
margin-bottom: 1px; }
#green {
background: #39d565;
border-top-left-radius: 25%;
box-shadow: 0 6px 0 #0d934b;
bottom: 6px;
transition: all 0.1s linear; }
#green:active {
bottom: 0px;
box-shadow: 0px 0px 0px #0d934b; }
#red {
background: #d23a51;
border-top-right-radius: 25%;
box-shadow: 0 6px 0 #711515;
bottom: 6px;
transition: all 0.1s linear; }
#red:active {
bottom: 0px;
box-shadow: 0px 0px 0px #711515; }
#blue {
background: #09f;
border-bottom-left-radius: 25%;
box-shadow: 0 6px 0 #06c;
bottom: 6px;
transition: all 0.1s linear; }
#blue:active {
bottom: 0px;
box-shadow: 0px 0px 0px #06c; }
#yellow {
background: #FD9A01;
border-bottom-right-radius: 25%;
box-shadow: 0 6px 0 #916828;
bottom: 6px;
transition: all 0.1s linear; }
#yellow:active {
bottom: 0px;
box-shadow: 0px 0px 0px #916828; }
.score {
width: 100%;
height: 10vh;
text-align: center;
color: #FFF;
text-shadow: 1px 3px 2px black; }
.control-panel {
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
height: 15vh;
background: #aaaaaa;
border-radius: 10px; }
.control-panel #on-off-btn {
width: 33.3333%; }
.control-panel #level {
background: orange;
width: 33.3333%; }
.control-panel #start {
background: purple;
width: 33.3333%; }
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden; }
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none; }
input.cmn-toggle-round + label {
padding: 2px;
max-width: 90%;
height: 35px;
background-color: #dddddd;
border-radius: 60px;
margin-top: 9px;
margin-left: 5px; }
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: ""; }
input.cmn-toggle-round + label:before {
right: 1px;
background-color: white;
border-radius: 60px;
transition: background 0.4s; }
input.cmn-toggle-round + label:after {
width: 38px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s; }
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196; }
input.cmn-toggle-round:checked + label:after {
margin-left: 20px; }
@media screen and (min-width: 426px) {
.container {
width: 426px;
margin-left: auto;
margin-right: auto; } }<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" charset="utf-8"></script>
<title>Simon Game FCC</title>
</head>
<body>
<div class="container">
<div class="game">
<div id="green" class="button"></div>
<div id="red" class="button"></div>
<div id="blue" class="button"></div>
<div id="yellow" class="button"></div>
</div>
<div class="score">
<h2>Score: 0 </h2>
</div>
<div class="control-panel">
<div id="on-off-btn">
<input id="cmn-toggle-1"type="checkbox" class="cmn-toggle cmn-toggle-round">
<label for="cmn-toggle-1"></label>
<p>Off/On</p>
</div>
<div id="level"></div>
<div id="start"></div>
</div>
</div>
</body>
</html>最佳答案
要达到预期结果，请使用以下选项
将 margin-left:20px 更改为 90% 以按预期工作
input.cmn-toggle-round:checked + label:after {
margin-left: 90%;
关于css - 切换从左到右响应的CSS3动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38416208/