如何用用CSS3写一个无限循环跳动的文字?

2017-09-25

1 个评论

  • 左转吧天使 132 天前

    可以用css3的animation实现这种效果

    animation: name duration timing-function delay iteration-count direction;

    name: 绑定到选择器的keyframe名称

    duration:动画所花费的时间

    timing-function:动画的速度曲线

    delay:动画开始之前的延迟

    count:动画播放的次数

    direction:动画播放的方向

    可以先设置一个keyframe动画,例如:

    @keyframes tel{

        0%{transform:scale(1);}

        1%{transform:scale(1.3);}

        3%{transform:scale(0.8);}

        6%{transform:scale(1);}

        100%{transform:scale(1);}

    }


    然后再需要调用该动画的地方调用即可。

    .telphone i {

         animation: tel 4s ease-out 0s infinite; 

         -webkit-animation: tel 6s ease-out 0s infinite; 

        display: inline-block;

        font-style: normal;

        font-size: 20px;

    }

    在上部分代码中我们规定了一个动画属性每4秒执行一次。

    其中需要执行动画的部分如下

        <div class="telphone">

            <i style="animation-delay:0s;-webkit-animation-delay:0s">1</i>

            <i style="animation-delay:0.1s;-webkit-animation-delay:0.1s">8</i>

            <i style="animation-delay:0.2s;-webkit-animation-delay:0.2s">6</i>

            <i style="animation-delay:0.3s;-webkit-animation-delay:0.3s">1</i>

            <i style="animation-delay:0.4s;-webkit-animation-delay:0.4s">8</i>

            <i style="animation-delay:0.5s;-webkit-animation-delay:0.5s">4</i>

            <i style="animation-delay:0.6s;-webkit-animation-delay:0.6s">2</i>

            <i style="animation-delay:0.7s;-webkit-animation-delay:0.7s">5</i>

            <i style="animation-delay:0.8s;-webkit-animation-delay:0.8s">8</i>

            <i style="animation-delay:0.9s;-webkit-animation-delay:0.9s">6</i>

            <i style="animation-delay:1.0s;-webkit-animation-delay:1.0s">8</i>

        </div>

    可用animation-delay属性规定每个元素的动画延迟。最终效果如下:

    TIM图片20170925123640.png