границы вращения Элемент

-5

У меня 2 элементы, такие как, что:границы вращения Элемент

<div class="element"><span></span></div>

элемент должен иметь закругленные границы (CSS) и при наведении курсора мыши граница должна быть пунктирную (CSS) и вращать, но продолжительность shoulde быть статическим. Любая помощь?

@keyframes rotate { 
 
    from { 
 
    transform: rotate(0); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes rotate { 
 
    from { 
 
    -moz-transform: rotate(0); 
 
    } 
 
    to { 
 
    -moz-transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes rotate { 
 
    from { 
 
    -webkit-transform: rotate(0); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
.element { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ededed; 
 
    color: @fff; 
 

 
} 
 
.element:hover { 
 
    animation: rotate 2s infinite linear; 
 
    -moz-animation: rotate 2s infinite linear; 
 
    -webkit-animation: rotate 2s infinite linear; 
 
}

<div class="element"><span>1</span> 
 
</div>

источник

2015-09-11 Александр

Что вы подразумеваете под вращением? Вы имеете в виду, что тире на границе должны перемещаться по элементу? – Andy

черты на границе должны перемещаться по элементу, да. –

это тестовый код. Как я могу получить, этот диапазон не перемещается с div? –

.element { 
 
    width: 250px; 
 
    height: 250px; 
 
    border:3px solid grey; 
 
    border-radius:50%; 
 
    margin: 25px auto; 
 
    line-height: 250px; 
 
    text-align: center; 
 
} 
 

 
.element:hover { 
 
    border-style:dashed; 
 
    animation: spin 10s infinite linear; 
 
} 
 

 
.element:hover span { 
 
    animation: spin 10s infinite reverse linear; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
} 
 

 
@keyframes spin { 
 
    100% { transform: rotate(1turn); } 
 
}

<div class="element"><span>Not Spinning On Hover</span></div>

источник

2015-09-11 10:48:30

@ Александр Я думаю, что этот не будет работать, если контент (не вращается ..) не посередине, я удалил строку «height-height» из элемента, и здесь вы можете увидеть результат - http://jsfiddle.net/3ptqvrze/ –

Ну, вам нужно будет предоставить свой фактический код, но принцип тот же. –

Этот вариант классный. Спин и поворот спина подходят мне хорошо –

Я считаю this codepen имеет результат вам нужно. Однако этот подход требует дополнительных <span> элементов внутри <div>.

источник

2015-09-11 11:03:06 eggnukes

Это интересно, но мне нужно другое. Посмотрите вверх, вращайте и вращайте спину, это именно то, что мне нужно. –

границы вращения Элемент

ответ

Смежные вопросы