元素边框旋转

-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

@Александр我认为这不会工作，如果内容（不旋转..）不在中间，我从元素中删除'line-height'，在这里你可以看到结果 - http://jsfiddle.net/3ptqvrze/ –

那么你必须提供你的实际代码，但原则是一样的。 –

这个变种很酷。旋转和反转旋转适合我 –

我相信this codepen有你需要的结果。但是，此方法在<div>内需要额外的<span>元素。

来源

2015-09-11 11:03:06 eggnukes

这很有趣，但我需要另一个。向上看，旋转并反转，这正是我需要的。 –

元素边框旋转

回答

相关问题