Spin the Wheel 代码 - 没有 javascript答案

【问题标题】：Spin the Wheel code - WITHOUT javascriptSpin the Wheel 代码 - 没有 javascript
【发布时间】：2015-03-18 07:38:33
【问题描述】：

希望构建这样的东西 - 旋转轮子 - 仅使用 HTML 和 CSS，无需 Javascript

寻找一些参考资料，甚至看看是否可以完成。

【问题讨论】：

HTML 和 CSS 没有事件处理程序，因此无法在点击时执行 CSS 动画。
@Justinas 您可以使用 :hover、:focus 和 :active 伪选择器。

标签： html css html5-canvas

【解决方案1】：

这是使用旋转的悬停效果。由于 css 没有事件处理程序，因此您无法添加/删除类。但是，您可以添加悬停效果：

div {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: gray;
  margin: 0 auto;
  text-align: center;
}
div:hover {
  -webkit-animation: spin 0.8s infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

Hover to see effect: &lt;div&gt;Spin&lt;/div&gt;

如果你可以使用 tiny 一点 javascript，你可以这样做：

$('div').click(function(){
  $(this).toggleClass("thisIsAdded");
  });

div {
      height: 100px;
      width: 100px;
      border-radius: 50%;
      background: gray;
      margin: 0 auto;
      text-align: center;
    }
    .thisIsAdded {
      -webkit-animation: spin 0.8s infinite linear;
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>

注意：

这里的脚本是纯粹切换类“thisIsAdded”。

【讨论】：

不是我想要的，但感谢您的回复。谢谢！
“没有 javascript”使得这个问题实际上是不可能的。 请问您为什么不使用 javascript？生成“随机数”需要某种脚本！！
@user3264603：你想做类似this的东西吗？如果是这样，它真的需要 javascript！

【解决方案2】：

正如 Justinas 指出的，我们不能在 click 事件上触发 css 样式。为此，您需要 javascript。但是，您可以使用 CSS 动画来实现旋转效果，但只能使用伪选择器。

下面是一个仅使用 CSS 的旋转效果示例

<style type="text/css">
.content
{
    float:left;cursor:pointer;   
}
.content::after
{
    content:'>';float:right;margin:0 0 0 10px;
    -moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
    -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}

</style>
<body>
    <div class="content">Sample</div>
</body>

【讨论】：

支持一个不错的选择。恕我直言，轮子总是旋转到 90 度似乎仍然令人不满意。如果是我……我会使用 JS 并获得一个随机结束轮换。
有趣！谢谢回复。如果只使用 HTML 就可以生成一个随机数，那么您每次都可以按随机度数旋转它。
@user3264603 不幸的是 html 无法生成随机数。它只是一个标记。如果你真的需要生成一个随机数并应用于 css，除了 javascript，你别无选择。

【解决方案3】：

给你..Fiddle

CSS：

.circle {
    border-radius: 50%;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 120px;
    height: 120px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

【讨论】：

不是我想要的，但感谢您的回复。谢谢！