0

私はこのCSSローダーを持っています:

http://jsfiddle.net/SPFgH/3/

HTML :

<div id="fountainG"> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

CSS :

#fountainG {
    position:relative;
    margin-left: calc(50% - 120px);
    width:240px;
    height:29px
}
#fountainG i {
    position:absolute;
    top:0;
    background-color:#A300A3;
    width:29px;
    height:29px;
    animation-name:bounce_fountainG;
    animation-duration:1.3s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.3);
    border-radius:19px;
}
#fountainG i:nth-child(1) {
    left:0;
    animation-delay:0.52s;
}
#fountainG i:nth-child(2) {
    left:30px;
    animation-delay:0.65s;
}
#fountainG i:nth-child(3) {
    left:60px;
    animation-delay:0.78s;
}
#fountainG i:nth-child(4) {
    left:90px;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
}
#fountainG i:nth-child(5) {
    left:120px;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
}
#fountainG i:nth-child(6) {
    left:150px;
    animation-delay:1.17s;
}
#fountainG i:nth-child(7) {
    left:180px;
    animation-delay:1.3s;
}
#fountainG i:nth-child(8) {
    left:210px;
    animation-delay:1.43s;
}
@keyframes bounce_fountainG {
    0% {
        transform:scale(1);
        background-color:#A300A3;
    }
    100% {
        transform:scale(.3);
        background-color:#999999;
    }
}

単一の HTML 要素を含む CSS アニメーションに変換する必要があります。:before疑似要素と疑似要素を使用し:afterて 8 つの子要素のうち 2 つを追加することはできますが、8 つの要素すべてを追加するにはどうすればよいでしょうか?

4

1 に答える 1

0

アニメーションを 1 つの I タグだけで動作させる必要がある場合

#fountainG {
    position:relative;
    margin-left: calc(50% - 120px);
    width:240px;
    height:29px
}
#fountainG i {
    position:absolute;
    top:0;
    background-color:#A300A3;
    width:29px;
    height:29px;
    animation-name:bounce_fountainG;
    animation-duration:1.3s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.3);
    border-radius:19px;
}
#fountainG i:nth-child(1) {
    left:0;
    animation-delay:0.52s;
}

@keyframes bounce_fountainG {
    0% {
        transform:scale(1);
        background-color:#A300A3;
    }
    100% {
        transform:scale(.3);
        background-color:#999999;
    }
}

これを試してみてください、あなたは試しましたか

于 2013-09-21T01:18:43.547 に答える