[分享]css3文字动画效果大全

CSS3文字动画效果是指通过CSS3技术实现对文字的运动、变形、旋转、缩放等效果，使得整个页面显得更加生动、有趣。下面将介绍一些常见的CSS3文字动画效果。/ 文字旋转 / .rotate{ anim...

CSS3文字动画效果是指通过CSS3技术实现对文字的运动、变形、旋转、缩放等效果，使得整个页面显得更加生动、有趣。下面将介绍一些常见的CSS3文字动画效果。

/* 文字旋转 */
.rotate{
    animation: rotate 2s linear infinite;
}

@keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

/* 文字变形 */
.skew{
    animation: skew 2s linear infinite;
}

@keyframes skew{
    0%{transform: skew(0deg);}
    50%{transform: skew(30deg);}
    100%{transform: skew(-30deg);}
}

/* 文字缩放 */
.scale{
    animation: scale 2s linear infinite;
}

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

/* 文字淡入淡出 */
.fade{
    animation: fade 2s linear infinite;
}

@keyframes fade{
    0%, 100%{opacity: 1;}
    50%{opacity: 0;}
}

/* 文字跑马灯 */
.marquee{
    animation: marquee 10s linear infinite;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

@keyframes marquee{
    0%{transform: translateX(0);}
    100%{transform: translateX(-100%);}
} 

以上CSS3文字动画效果可以应用在标题、按钮、标签、轮播图等页面元素上，增强页面交互性和视觉效果。