AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2022-04-27 430
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天分享一个用 css3 的 animation 实现的一个文字抖动的动画效果

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


c9b64bc354c1ec1bf0a03ab1eed28b52.jpg


实现思路：设置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) rotate(-0.5deg);    }
    32% {        transform: translate(9px, -6px) rotate(-2.5deg);    }
    34% {        transform: translate(-5px, 1px) rotate(3.5deg);    }
    36% {        transform: translate(0px, -5px) rotate(2.5deg);    }
    38% {        transform: translate(2px, 7px) rotate(-1.5deg);    }
    40% {        transform: translate(6px, 3px) rotate(-1.5deg);    }
    42% {        transform: translate(1px, -5px) rotate(-1.5deg);    }
    44% {        transform: translate(10px, -4px) rotate(-0.5deg);    }
    46% {        transform: translate(-2px, 2px) rotate(3.5deg);    }
    48% {        transform: translate(3px, 4px) rotate(-0.5deg);    }
    50% {        transform: translate(8px, 1px) rotate(-1.5deg);    }
    52% {        transform: translate(7px, 4px) rotate(-1.5deg);    }
    54% {        transform: translate(10px, 8px) rotate(-1.5deg);    }
    56% {        transform: translate(-3px, 0px) rotate(-0.5deg);    }
    58% {        transform: translate(0px, -1px) rotate(1.5deg);    }
    60% {        transform: translate(6px, 9px) rotate(-1.5deg);    }
    62% {        transform: translate(-9px, 8px) rotate(0.5deg);    }
    64% {        transform: translate(-6px, 10px) rotate(0.5deg);    }
    66% {        transform: translate(7px, 0px) rotate(0.5deg);    }
    68% {        transform: translate(3px, 8px) rotate(-0.5deg);    }
    70% {        transform: translate(-2px, -9px) rotate(1.5deg);    }
    72% {        transform: translate(-6px, 2px) rotate(1.5deg);    }
    74% {        transform: translate(-2px, 10px) rotate(-1.5deg);    }
    76% {        transform: translate(2px, 8px) rotate(2.5deg);    }
    78% {        transform: translate(6px, -2px) rotate(-0.5deg);    }
    80% {        transform: translate(6px, 8px) rotate(0.5deg);    }
    82% {        transform: translate(10px, 9px) rotate(3.5deg);    }
    84% {        transform: translate(-3px, -1px) rotate(3.5deg);    }
    86% {        transform: translate(1px, 8px) rotate(-2.5deg);    }
    88% {        transform: translate(-5px, -9px) rotate(2.5deg);    }
    90% {        transform: translate(2px, 8px) rotate(0.5deg);    }
    92% {        transform: translate(0px, -1px) rotate(1.5deg);    }
    94% {        transform: translate(-8px, -1px) rotate(0.5deg);    }
    96% {        transform: translate(-3px, 8px) rotate(-1.5deg);    }
    98% {        transform: translate(4px, 8px) rotate(0.5deg);    }
    100% {        transform: translate(0, 0) rotate(0);    }            }


    具体样式

      body{    width: 100vw;    height: 100vh;    display: flex;    justify-content: center;    align-items: center;    background: rgb(13,197,193);}.txt{    color: white;    font-weight: bold;    font-size: 18px;    border-radius: 10px;    animation: shake 5s infinite ease-in-out;}


      完整代码

        <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>发光盒子动画</title>    <style>        @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) rotate(-0.5deg);            }
            32% {                transform: translate(9px, -6px) rotate(-2.5deg);            }
            34% {                transform: translate(-5px, 1px) rotate(3.5deg);            }
            36% {                transform: translate(0px, -5px) rotate(2.5deg);            }
            38% {                transform: translate(2px, 7px) rotate(-1.5deg);            }
            40% {                transform: translate(6px, 3px) rotate(-1.5deg);            }
            42% {                transform: translate(1px, -5px) rotate(-1.5deg);            }
            44% {                transform: translate(10px, -4px) rotate(-0.5deg);            }
            46% {                transform: translate(-2px, 2px) rotate(3.5deg);            }
            48% {                transform: translate(3px, 4px) rotate(-0.5deg);            }
            50% {                transform: translate(8px, 1px) rotate(-1.5deg);            }
            52% {                transform: translate(7px, 4px) rotate(-1.5deg);            }
            54% {                transform: translate(10px, 8px) rotate(-1.5deg);            }
            56% {                transform: translate(-3px, 0px) rotate(-0.5deg);            }
            58% {                transform: translate(0px, -1px) rotate(1.5deg);            }
            60% {                transform: translate(6px, 9px) rotate(-1.5deg);            }
            62% {                transform: translate(-9px, 8px) rotate(0.5deg);            }
            64% {                transform: translate(-6px, 10px) rotate(0.5deg);            }
            66% {                transform: translate(7px, 0px) rotate(0.5deg);            }
            68% {                transform: translate(3px, 8px) rotate(-0.5deg);            }
            70% {                transform: translate(-2px, -9px) rotate(1.5deg);            }
            72% {                transform: translate(-6px, 2px) rotate(1.5deg);            }
            74% {                transform: translate(-2px, 10px) rotate(-1.5deg);            }
            76% {                transform: translate(2px, 8px) rotate(2.5deg);            }
            78% {                transform: translate(6px, -2px) rotate(-0.5deg);            }
            80% {                transform: translate(6px, 8px) rotate(0.5deg);            }
            82% {                transform: translate(10px, 9px) rotate(3.5deg);            }
            84% {                transform: translate(-3px, -1px) rotate(3.5deg);            }
            86% {                transform: translate(1px, 8px) rotate(-2.5deg);            }
            88% {                transform: translate(-5px, -9px) rotate(2.5deg);            }
            90% {                transform: translate(2px, 8px) rotate(0.5deg);            }
            92% {                transform: translate(0px, -1px) rotate(1.5deg);            }
            94% {                transform: translate(-8px, -1px) rotate(0.5deg);            }
            96% {                transform: translate(-3px, 8px) rotate(-1.5deg);            }
            98% {                transform: translate(4px, 8px) rotate(0.5deg);            }
            100% {                transform: translate(0, 0) rotate(0);            }                    }        body{            width: 100vw;            height: 100vh;            display: flex;            justify-content: center;            align-items: center;            background: rgb(13,197,193);        }        .txt{            color: white;            font-weight: bold;            font-size: 18px;            border-radius: 10px;            animation: shake 5s infinite ease-in-out;        }</style></head><body>       <span class="txt">欢迎来到Lpyexplore的编程小屋！</span></body></html>


        关注我，带你每天了解一个 css3 炫酷小动画

        关键词：
        CSS文字
        CSS动画
        CSS抖动
        CSS文字动画
        前端印象
        目录
        相关文章
        游客fz577umxdejsg
        |
        2月前
        |
        前端开发
        2s 利用 HTML+css动画实现企业官网效果
        2s 利用 HTML+css动画实现企业官网效果
        游客fz577umxdejsg
        43 2
        六卿
        |
        6天前
        |
        前端开发
        前端基础(五)_CSS文本文字属性、背景颜色属性
        本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
        六卿
        11 3
        前端基础(五)_CSS文本文字属性、背景颜色属性
        六卿
        |
        8天前
        |
        JavaScript 前端开发
        JS配合CSS3实现动画和拖动小星星小Demo
        本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
        六卿
        20 0
        JS配合CSS3实现动画和拖动小星星小Demo
        疯狂的猿
        |
        2月前
        |
        前端开发
        简单几行代码CSS实现网页自动打文字效果
        简单几行代码CSS实现网页自动打文字效果
        疯狂的猿
        38 1
        简单几行代码CSS实现网页自动打文字效果
        蓝易云
        |
        2月前
        |
        前端开发 UED 开发者
        有趣的CSS - 文字加载动画效果
        这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
        蓝易云
        41 5
        游客fz577umxdejsg
        |
        2月前
        |
        前端开发 JavaScript
        HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
        HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
        游客fz577umxdejsg
        69 2
        游客fz577umxdejsg
        |
        2月前
        |
        前端开发
        CSS动画霓虹灯闪烁效果
        CSS动画霓虹灯闪烁效果
        游客fz577umxdejsg
        36 2
        游客fz577umxdejsg
        |
        2月前
        |
        前端开发 JavaScript
        还在为酷炫css动画背景头疼吗？1分钟解决
        还在为酷炫css动画背景头疼吗？1分钟解决
        游客fz577umxdejsg
        31 2
        游客fz577umxdejsg
        |
        2月前
        |
        前端开发
        HTML+CSS动画实现动感3D卡片墙：现代Web设计的视觉盛宴
        HTML+CSS动画实现动感3D卡片墙：现代Web设计的视觉盛宴
        游客fz577umxdejsg
        35 2
        游客fz577umxdejsg
        |
        2月前
        |
        前端开发
        一键复制HTML+CSS动画 打造炫酷的搜索框
        一键复制HTML+CSS动画 打造炫酷的搜索框
        游客fz577umxdejsg
        30 2