[分享]css3文字的动画效果

CSS3文字动画效果，是指利用CSS3技术来设计文字效果的一种方法，常用于网站的动态设计中。下面将介绍几种常见的文字动画效果。/1. 文字阴影逐渐放大/ .shadow{ color: transpa...

CSS3文字动画效果，是指利用CSS3技术来设计文字效果的一种方法，常用于网站的动态设计中。下面将介绍几种常见的文字动画效果。

/*1. 文字阴影逐渐放大*/
.shadow{
    color: transparent;
    text-shadow: #FFFFFF 0px 0px 0px;
    animation: shadow 2s infinite;
}

@keyframes shadow{
    50%{
        text-shadow: #FFFFFF 0px 0px 10px;
    }
}

/*2. 文字角度逐渐变化*/
.rotate{
    animation: rotate 2s infinite;
}

@keyframes rotate{
    0%{
        transform: rotateY(0deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}

/*3. 文字位置逐渐移动*/
.move{
    animation: move 2s infinite;
}

@keyframes move{
    0%{
        transform: translateX(0px);
    }
    50%{
        transform: translateX(50px);
    }
    100%{
        transform: translateX(0px);
    }
}

/*4. 文字逐渐放大*/
.scale{
    animation: scale 2s infinite;
}

@keyframes scale{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
} 

以上是常见的四种文字动画效果，可以根据需求进行添加和修改。