旋转轮子代码 - 没有 javascript

Question

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

1. http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html

2. http://www.dougtesting.net/winwheel

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

Answer 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: <div>Spin</div>

如果你可以使用一个微小的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”。