Question

想要构建这样的东西 - 旋转轮子 - 只使用HTML和CSS，不用 Javascript

http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel

寻找一些参考文献，甚至看看是否可以做到。

Answer 1

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

＆＃13;

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);
  }
}

＆＃13;

Hover to see effect: <div>Spin</div>

＆＃13;

如果您可以使用 tiny 位的javascript，您可以这样做：

＆＃13;

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

＆＃13;

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);
      }
    }

＆＃13;

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

＆＃13;

注意：

这里的脚本是纯粹切换课程＆＃39; thisIsAdded＆＃39;。

Answer 2

正如Justinas指出的那样，我们不能在点击事件上发布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>

Answer 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); } }

旋转轮代码 - 没有javascript

3 个答案: