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

Fiddle

希望助けを得るために。

Answer 1

これは、1つの要素と2つの擬似コードを使用して行うことができます。 2つの擬似要素をコンテナ要素より大きくし、コンテナの後ろに配置し、rotateのアニメーションを追加します。

注：これは、開始に役立つ基本サンプルです。私はあなたのために微調整部分を残すだろう。 this MDN pageの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>