Question

你如何在HTML5和CSS3中编写一个页面，其中包含几个移动（漫无目的）的圆圈，并在单击时更改颜色。颜色可以是任意颜色，也可以只是两者之间的来回颜色。我试着这样做纯粹作为一个学习的例子和CSS - 没有JS。

Answer 1

对于圆圈，创建一个正方形并将其边框半径设置为50%。

.circle{
   width:50px;
   height:50px;
   display:block;
   border-radius:50%;
}

移动它将其位置设置为absolute或fixed（取决于您希望约束的位置），然后使用关键帧为其设置动画。

如果没有CSS，你无法让它随机移动，但你可以定义一个复杂的路径。

请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

<强>更新

一个小型演示（没有供应商前缀）

＆＃13;

.circle{
  width: 50px;
  height: 50px;
  border-radius:50%;
  position:fixed;
  background-color:red;
  
  /*center it*/
  margin-left: -25px;
  margin-top: -25px;
}

.move-1{
   animation: rombus 10s linear 0s infinite;
}

@keyframes rombus{
   0%{left:50%;top:0}
   25%{left:100%;top:50%}
   50%{left:50%;top:100%}
   75%{left:0;top:50%}
   100%{left:50%;top:0}
}

＆＃13;

<div class="circle move-1"></div>

＆＃13;

要添加点击处理，它会变得有点复杂，因为在html中处理状态你只有复选框..

因此html和css都需要进行更改。它可能不适用于实际使用。

＆＃13;

.circle{
  width: 100%;
  height: 100%;
  border-radius:50%;
  display:block;
  background-color:red;
}
:checked + .circle{background-color:green;}


.animated-circle{
  position:fixed;
  display:block;
  border-radius:50%;
  width: 50px;
  height: 50px;  
  
  /*center it*/
  margin-left: -25px;
  margin-top: -25px;
  cursor:pointer;
}
.animated-circle input{display:none;}

.move-1{
   animation: rombus 20s linear 0s infinite;
}

@keyframes rombus{
   0%{left:50%;top:0}
   25%{left:100%;top:50%}
   50%{left:50%;top:100%}
   75%{left:0;top:50%}
   100%{left:50%;top:0}
}

＆＃13;

<label class="animated-circle move-1"><input type="checkbox" /><div class="circle"></div></label>

＆＃13;

Answer 2

您可以将其他css选择器用作+ 这里的例子，没有js：http://jsfiddle.net/j3o7y237/
在ie8和gte工作。加上上面回答的动画：http://jsfiddle.net/j3o7y237/1/

如何创建一个CSS3动画圆圈，单击时会改变颜色？

2 个答案: