html - CSS3 無限スピン

Question

そのため、「ホバー」すると画像を360回無限に回転させようとしています。残念ながらそうではありません。背景要素を使用して画像を表示したためだと思いますが、別の方法で画像を表示する方法が思いつきません。
ブートストラップ 3 の使用、グリフィコンの使用方法がわからない

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

ありがとう！

score 1 · Accepted Answer

CSS に次のようなものがありません。

@-moz-keyframes spinAround { 
    from {-moz-transform: rotate(00deg); } 
    to {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes spinAround {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes spinAround {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

フィドルを参照してください：http://jsfiddle.net/MJXrM/3/

これも変更しました：

.services:hover > i

これに：

.services > i:hover

score 1 · Accepted Answer

ブートストラップで less を使用している場合は、次のようにできます。

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

score -1 · Accepted Answer

Infinite Spin を実装するためにスプライトシートアニメーションを使用することを検討しますか? アニメーションファイルがある場合は、次のコードで実装できます。この方法は、古いブラウザーと最新のブラウザーの両方との互換性が高くなります。

<div class="spinner-bg">
    <div id="spinner">
    </div>
</div>

.spinner-bg
{
    width: 44px;
    height: 41px;
    background:#000000;
}

#spinner
{
    width: 44px;
    height: 41px;
    background:url(./preloadericon.png) no-repeat;
}

<script>
var currentbgx = 0;
var circle = document.getElementById("spinner");
var circleTimer = setInterval(playAnimation, 100);

function playAnimation() {
    if (circle != null) {
        circle.style.backgroundPosition = currentbgx + "px 0";
    }

    currentbgx -= 44; //one frame width, there are 5 frame
    //start from 0, end at 176, it depends on the png frame length
    if (currentbgx < -176) {
        currentbgx = 0;
    }
}
</script>

また、HTML アニメーションの実装をさらにここで見つけることもできます。

AJAX スピナーアニメーションの読み込み

HTML5 ゲームで CSS アニメーションを作成する

html - CSS3 無限スピン

3 に答える 3

Related

Reference