css实现跳动的文字

最新推荐文章于 2025-06-24 17:28:12 发布

小鹰丶

最新推荐文章于 2025-06-24 17:28:12 发布

阅读量4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css 前端 css3 animation html

本文链接：https://blog.youkuaiyun.com/jeremyjone/article/details/104725989

本文介绍如何利用CSS3的animation属性和逐帧切换样式，创建一个活泼的跳动文字效果。该效果适用于网页底部等位置，提供一种吸引用户注意力的元素。只需一个div元素配合相应的CSS代码即可实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：https://www.jeremyjone.com/618/，转载请注明

老早老早收藏的一段代码，经过稍微修改之后，一直用到了现在，不管是我自己的网站，还是正儿八经的测试项目，我都喜欢把它放到底部作为一个比较活泼的元素。

其实内容无所谓，什么内容都可以，只需要一个div，然后通过css的animation动画通过-webkit-transform和-webkit-rotate逐帧切换样式即可。

/* start */
.my-face {
   
   
    animation: my-face 5s infinite ease-in-out;
    display: inline-block;
    margin: 0 5px;
}

    @-webkit-keyframes my-face {
   
   

    2%,
    24%,
    80% {
   
   
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
    transform: translate(0, 1.5px) rotate(1.5deg)
    }

    4%,
    68%,
    98% {
   
   
    -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
    transform: translate(0, -1.5px) rotate(-.5deg)
    }

    38%,
    6% {
   
   
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
    transform: translate(0, 1.5px) rotate(-1.5deg)
    }

    8%,
    86% {
   
   
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
    transform: translate(0, -1.5px) rotate(-1.5deg)
    }

    10%,
    72% {
   
   
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
    transform: translate(0, 2.5px) rotate(1.5deg)
    }

    12%,
    64%,
    78%,
    96% {
   
   
    -webkit-transform: translate(0, -.5px) rotate(1.5deg);
    transform: translate(0, -.5px) rotate(1.5deg)
    }

    14%,
    54% {
   
   
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
    transform: translate(0, -1.5px) rotate(1.5deg)
    }

    16% {
   
   
    -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
    transform: translate(0, -.5px) rotate(-1.5deg)
    }

    18%,
    22% {
   
   
    -webkit-transform: translate(0, .5px) rotate(-1.5deg);
    transform: translate(0, .5px