如何使用HTML和CSS创建旋转效果？

Question

我需要旋转效果悬停在那个方格上，我能得到的是下面写的。

HTML

<div class="mainSquare">
  <div class="firstInnerSquare">
    <div class="lastInnerSquare">
      Hello
    </div>
  </div>
</div>

CSS

.mainSquare{
  width:160px;
  height:160px;
  background:black;
  margin: 50px auto;
  padding:25px;
}
.firstInnerSquare{
  width:110px;
  height:110px;
  background:red;
  padding:25px;
}
.lastInnerSquare{
  text-align:center;
  width:110px;
  padding: 46px 0px;
  background:white;
}

小提琴

希望得到帮助。

Answer 1

您可以使用单个元素和两个伪来完成此操作。 使2个伪元素大于容器元素，将它们放在容器后面并为它们添加rotate动画。

注意：这只是一个可以帮助您入门的基础示例。 我会留下微调部分供你处理。 您可以在此MDN页面中阅读有关CSS动画属性的更多信息。

 .shape { position: relative; /* used to position the pseudos relative to the parent */ height: 100px; width: 100px; background: white; border: 1px solid; margin: 100px; /* required because children are larger than parent */ } .shape:after, .shape:before { position: absolute; content: ''; } .shape:before { height: 125%; /* make one pseudo 25% larger than parent */ width: 125%; top: -12.5%; /* 25/2 to make sure its center is same as the parent's */ left: -12.5%; /* 25/2 to make sure its center is same as the parent's */ background: red; z-index: -1; /* send it behind the parent */ } .shape:after { height: 150%; /* make this pseudo larger than the parent and the other pseudo */ width: 150%; top: -25%; /* 50/2 to make sure its center is same as the parent's */ left: -25%; /* 50/2 to make sure its center is same as the parent's */ background: black; z-index: -2; /* send it behind both the parent and other pseudo */ } /* add animation when hovering on parent */ .shape:hover:before { animation: rotate 3s linear infinite; } .shape:hover:after { animation: rotate-rev 3s linear infinite; } @keyframes rotate { to { transform: rotate(359deg); /* some browsers don't display spin when it is 360 deg */ } } @keyframes rotate-rev { to { transform: rotate(-359deg); /* reverse direction rotate */ } } 

 <div class='shape'></div> 

Answer 2

这是一个原始结构和一个关键帧声明：

每个div需要改变的是动画的持续时间和方向。 “中间”div的时间需要是外/内的50％。

 .mainSquare { width: 160px; height: 160px; background: black; margin: 50px auto; padding: 25px; animation: spin 2s infinite linear; } .firstInnerSquare { width: 110px; height: 110px; background: red; padding: 25px; animation: spin 1s infinite linear reverse; } .lastInnerSquare { text-align: center; width: 110px; padding: 46px 0px; background: white; animation: spin 2s infinite linear; } @keyframes spin { to { transform: rotate(1turn); } } 

 <div class="mainSquare"> <div class="firstInnerSquare"> <div class="lastInnerSquare"> Hello </div> </div> </div>