Question

目前我正在构建一个西蒙游戏克隆，我想我想现代化一下。

无论如何，我找到了一个关于如何只使用CSS3进行切换开关的博客（http://callmenick.com/post/css-toggle-switch-examples）

但是，由于我正在努力使这个网络响应，我制作了宽度为100％的容器（标签）。

我很难弄清楚如何让切换开关本身在任何宽度视口移动到容器的末端。

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>

Answer 1

要达到预期效果，请使用以下选项

更改保证金左：20px至90％以按预期工作

input.cmn-toggle-round:checked + label:after {
  margin-left: 90%;

}

http://codepen.io/nagasai/pen/jAYojX

切换开关css3动画从左到右响应

1 个答案: