Question

我有一个html标签

<h4 class='groweffect'>Loading please wait</h4>

我想添加一个CSS Grow效果，其中每个字母将一个接一个地不断增长和缩小。因此它会产生一些加载效果。我怎么能这样做。

这是增长效应...... http://www.jeremycookson.com/top-10-css-hover-effects/

.groweffect {
  -webkit-transition:all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

由于

Answer 1

包裹span

中的每个字母

    <h4 class='text'>
     <span>H</span><span>e</span><span>y</span>
    </h4>

然后在延迟的每个字母上触发动画，以便它们按顺序关闭。

h4.text span:first-child{
  animation:letterAnim 2s linear;
}
h4.text span:nth-child(2){
  animation:letterAnim 2s linear;
  animation-delay:1.5s;
}
h4.text span:nth-child(3){
  animation:letterAnim 2s linear;
  animation-delay:3s;
}
@keyframes letterAnim{
  0%{font-size:16px;}/*default*/
  50%{font-size:30px;}
  100{font-size:16px;}
}

Answer 2

一种方法是为每个字母生效。这样的事情。

<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">L</div>
<div id="fountainTextG_2" class="fountainTextG">o</div>
<div id="fountainTextG_3" class="fountainTextG">a</div>
<div id="fountainTextG_4" class="fountainTextG">d</div>
<div id="fountainTextG_5" class="fountainTextG">i</div>
<div id="fountainTextG_6" class="fountainTextG">n</div>
<div id="fountainTextG_7" class="fountainTextG">g</div>
<div id="fountainTextG_8" class="fountainTextG">.</div>
<div id="fountainTextG_9" class="fountainTextG">.</div>
<div id="fountainTextG_10" class="fountainTextG">.</div></div>

风格将是

#fountainTextG{
    width:234px;
    margin:auto;
}

.fountainTextG{
    color:rgb(0,0,0);
    font-family:Arial;
    font-size:24px;
    text-decoration:none;
    font-weight:normal;
    font-style:normal;
    float:left;
    animation-name:bounce_fountainTextG;
        -o-animation-name:bounce_fountainTextG;
        -ms-animation-name:bounce_fountainTextG;
        -webkit-animation-name:bounce_fountainTextG;
        -moz-animation-name:bounce_fountainTextG;
    animation-duration:2.09s;
        -o-animation-duration:2.09s;
        -ms-animation-duration:2.09s;
        -webkit-animation-duration:2.09s;
        -moz-animation-duration:2.09s;
    animation-iteration-count:infinite;
        -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -moz-animation-iteration-count:infinite;
    animation-direction:normal;
        -o-animation-direction:normal;
        -ms-animation-direction:normal;
        -webkit-animation-direction:normal;
        -moz-animation-direction:normal;
    transform:scale(.5);
        -o-transform:scale(.5);
        -ms-transform:scale(.5);
        -webkit-transform:scale(.5);
        -moz-transform:scale(.5);
}#fountainTextG_1{
    animation-delay:0.75s;
        -o-animation-delay:0.75s;
        -ms-animation-delay:0.75s;
        -webkit-animation-delay:0.75s;
        -moz-animation-delay:0.75s;
}
#fountainTextG_2{
    animation-delay:0.9s;
        -o-animation-delay:0.9s;
        -ms-animation-delay:0.9s;
        -webkit-animation-delay:0.9s;
        -moz-animation-delay:0.9s;
}
#fountainTextG_3{
    animation-delay:1.05s;
        -o-animation-delay:1.05s;
        -ms-animation-delay:1.05s;
        -webkit-animation-delay:1.05s;
        -moz-animation-delay:1.05s;
}
#fountainTextG_4{
    animation-delay:1.2s;
        -o-animation-delay:1.2s;
        -ms-animation-delay:1.2s;
        -webkit-animation-delay:1.2s;
        -moz-animation-delay:1.2s;
}
#fountainTextG_5{
    animation-delay:1.35s;
        -o-animation-delay:1.35s;
        -ms-animation-delay:1.35s;
        -webkit-animation-delay:1.35s;
        -moz-animation-delay:1.35s;
}
#fountainTextG_6{
    animation-delay:1.5s;
        -o-animation-delay:1.5s;
        -ms-animation-delay:1.5s;
        -webkit-animation-delay:1.5s;
        -moz-animation-delay:1.5s;
}
#fountainTextG_7{
    animation-delay:1.64s;
        -o-animation-delay:1.64s;
        -ms-animation-delay:1.64s;
        -webkit-animation-delay:1.64s;
        -moz-animation-delay:1.64s;
}
#fountainTextG_8{
    animation-delay:1.79s;
        -o-animation-delay:1.79s;
        -ms-animation-delay:1.79s;
        -webkit-animation-delay:1.79s;
        -moz-animation-delay:1.79s;
}
#fountainTextG_9{
    animation-delay:1.94s;
        -o-animation-delay:1.94s;
        -ms-animation-delay:1.94s;
        -webkit-animation-delay:1.94s;
        -moz-animation-delay:1.94s;
}
#fountainTextG_10{
    animation-delay:2.09s;
        -o-animation-delay:2.09s;
        -ms-animation-delay:2.09s;
        -webkit-animation-delay:2.09s;
        -moz-animation-delay:2.09s;
}




@keyframes bounce_fountainTextG{
    0%{
        transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-o-keyframes bounce_fountainTextG{
    0%{
        -o-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -o-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-ms-keyframes bounce_fountainTextG{
    0%{
        -ms-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -ms-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-webkit-keyframes bounce_fountainTextG{
    0%{
        -webkit-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -webkit-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-moz-keyframes bounce_fountainTextG{
    0%{
        -moz-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -moz-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

DEMO

Answer 3

你必须在div中包装每个字母以使其动画化。我想你正在寻找像this

这样的东西

This网站有许多加载效果http://cssload.net/

您可以点击缩略图进行编辑和自定义。

逐字逐句对文本产生影响

3 个答案: