CSS3无限旋转 [英] CSS3 Infinite Spin

问题描述

所以我想使图像旋转，360无限的时候，悬停。但不幸的是它不是，我想这也许是因为我使用了一个背景元素，以显示图像，但我想不出如何显示图像的其他方式。结果
使用自举3，不确定如何使用glyphicons

So I'm trying to make an image rotate, 360 infinite times when "hover". But unfortunately it isn't, I think it maybe because I have used a background element to display the image but I cant think of how to display the image an other way.
Using bootstrap 3, unsure how to use glyphicons

<div class="services">
    <i class="icon-html5"></i>
    <h4 class="service-heading">HTML5</h4>
    <p>Developed with high level of coding and care to provide everyone with a HTML5 compliant markup.</p>
</div>

.services{
    background-color:#F5F5F5;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
    margin:60px 0;
    padding:14px;
    position: relative;
}
.services i{
    border:10px solid #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    color:#F4F4F4;
    font-size: 18px;
    height:100%;
    left:50%;
    line-height: 100%;
    margin: -60px 0 0 -60px !important;
    padding:0 !important;
    position: absolute;
    top:0px;
    transition: all 0.3s ease-in-out 0s;
    width:140px;
    background-color:#F47E7E;
}
.services:hover > i{
    animation: 1.5s linear 0s normal none infinite spinAround;
    border: 10px solid #FFFFFF;
}
.icon-html5{
    background-image: url('../img/html5.png');
    background-repeat: no-repeat;
    animation: 1.5s linear 0s normal none infinite spinAround;
    border: 10px solid #FFFFFF;
    background-position:center;
}

JS小提琴 - http://jsfiddle.net/MJXrM/1/

谢谢！

推荐答案

如果您在使用更少的自举，你可以做：

If you’re using less with bootstrap, you can just do:

.services > i:hover {
    .icon-spin;
}

这篇关于CSS3无限旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！