文字抖动_【每日一更】css3 抖动文字动画

weixin_39647186

于 2021-01-13 07:49:42 发布

阅读量332

点赞数

文章标签：文字抖动

本文链接：https://blog.csdn.net/weixin_39647186/article/details/112640304

版权

点击上方蓝字关注我们

今天分享一个用 css3 的 animation 实现的一个文字抖动的动画效果，先来看成品图

实现思路：设置50帧，每一帧都用 transform 的 translate 属性和 rotate 属性来设置文字的具体位置和倾斜角度，然后设置 animation 动画为无限循环即可实现该动画效果

标签元素部分

<body>       <span class="txt">欢迎来到Lpyexplore的编程小屋！span>body>

@keyframes部分

@keyframes shake {
        0% {
            transform: translate(0, 0) rotate(0);    }    2% {
            transform: translate(6px, -2px) rotate(3.5deg);    }    4% {
            transform: translate(5px, 8px) rotate(-0.5deg);    }    6% {
            transform: translate(6px, -3px) rotate(-2.5deg);    }    8% {
            transform: translate(4px, -2px) rotate(1.5deg);    }    10% {
            transform: translate(-6px, 8px) rotate(-1.5deg);    }    12% {
            transform: translate(-5px, 5px) rotate(1.5deg);    }    14% {
            transform: translate(4px, 10px) rotate(3.5deg);    }    16% {
            transform: translate(0px, 4px) rotate(1.5deg);    }    18% {
            transform: translate(-1px, -6px) rotate(-0.5deg);    }    20% {
            transform: translate(6px, -9px) rotate(2.5deg);    }    22% {
            transform: translate(1px, -5px) rotate(-1.5deg);    }    24% {
            transform: translate(-9px, 6px) rotate(-0.5deg);    }    26% {
            transform: translate(8px, -2px) rotate(-1.5deg);    }    28% {
            transform: translate(2px, -3px) rotate(-2.5deg);    }    30% {
            transform: translate(10px, -7px)

最低0.47元/天解锁文章

weixin_39647186

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字抖动_【每日一更】css3 抖动文字动画

点击上方蓝字关注我们今天分享一个用 css3 的animation实现的一个文字抖动的动画效果，先来看成品图实现思路：设置50帧，每一帧都用 transform 的 translate 属性和 rotate 属性来设置文字的具体位置和倾斜角度，然后设置 animation 动画为无限循环即可实现该动画效果标签元素部分<body> <span cla...
复制链接

扫一扫