Как создать эффект спина с помощью 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

Вы можете сделать это, используя один элемент и два псевдо. Сделайте 2 псевдоэлемента больше, чем элемент контейнера, расположите их за контейнером и добавьте к ним анимацию rotate.

Примечание: Это всего лишь базовый образец, который поможет вам начать работу. Я бы оставил тонкую настройку для вас. Подробнее о свойствах анимации CSS вы можете узнать в this MDN page.

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