CSS Анимация: кривые Стрелки

Question

Возможно ли кругово оживить это изображение?

Я попытался анимировать его, создав относительного родителя и установив каждое изображение (бизнес-решения div, его решения div, жизненные решения div и образовательные решения div для абсолютного). Я использовал этот код, @keyframes rotate { 0% { transform: rotate (0deg); } 100% { transform: rotate (360deg); } } и он вращается в разных режимах. Они вращались на своем месте.

Я хочу анимировать его так, чтобы: 4 службы будут круговыми движениями. Кроме внешних и внутренних текстов. Заранее спасибо.

Answer 1

Вот краткий демо общего pricipal.

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 5em auto; 
 
    border: 1px solid grey; 
 
    position: relative; 
 
    -webkit-animation: spin 10s infinite linear; 
 
    animation: spin 10s infinite linear; 
 
} 
 
.object { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    background: plum; 
 
    top: 25px; 
 
    left: 25px; 
 
    -webkit-animation: spin 10s infinite reverse linear; 
 
    animation: spin 10s infinite reverse linear; 
 
} 
 
@-webkit-keyframes spin { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    -webkit-transform: rotate(1turn); 
 
    transform: rotate(1turn); 
 
    } 
 
} 
 
@keyframes spin { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    -webkit-transform: rotate(1turn); 
 
    transform: rotate(1turn); 
 
    } 
 
}

<div class="box"> 
 
    <div class="object">Text</div> 
 
</div>

Answer 2

Вам понадобится как минимум два элемента. Статический должен иметь прозрачные области, чтобы он мог сидеть над вращающимся div или за ним.

Чтобы повернуть DIV:

div.your-rotating-element { 
    animation-name: rotate-div; 
    /*enter other styles*/ 
    animation:spin 4s linear infinite; 
    } 

@-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }