Wie erstelle ich Spin-Effekte mit HTML & CSS?

Question

Ich brauchte Spin-Effekt auf den Hover dieses Quadrats, was ich bekommen kann, ist unten geschrieben.

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

Hoffnung, Hilfe zu erhalten.

Answer 1

Sie können dies tun, indem Sie ein einzelnes Element und zwei Pseudos verwenden. Machen Sie die 2 Pseudoelemente größer als das Containerelement, positionieren Sie sie hinter dem Container und fügen Sie ihnen eine rotate Animation hinzu.

Hinweis: Dies ist nur ein Basisbeispiel, das Ihnen den Einstieg erleichtern würde. Ich würde das Feinabstimmungs-Teil für dich zurücklassen. Sie können mehr über die CSS-Animationseigenschaften in this MDN page lesen.

.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

Hier ist eine mit der ursprünglichen Struktur und nur ein Keyframe-Anweisung:

Alles, was, pro div, ist die Animation Dauer und Richtung geändert werden muss. Das Timing des "mittleren" Divs muss 50% des äußeren/inneren Timings betragen.

.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>