文字抖动效果

最新推荐文章于 2024-04-22 17:35:13 发布

小丞同学

最新推荐文章于 2024-04-22 17:35:13 发布

阅读量1.2k

点赞数 3

分类专栏： CSS特效文章标签： css html html5 css3

本文链接：https://blog.csdn.net/m0_50855872/article/details/114653201

版权

CSS特效专栏收录该内容

18 篇文章 15 订阅

订阅专栏

文字抖动效果

写在前面

千万别说直到永远，因为你压根不知道永远有多远

今天利物浦挺进了欧冠八强！

实现效果

在这里插入图片描述

实现原理

这个实现的方法和之前所写的文字闪烁效果方法相似
通过给每个字添加一定的动画延时，使得字体产生抖动的感觉
文字闪烁效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #636e72;
        }
        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        span {
            position: relative;
            display: inline-block;
            color: snow;
            font-size: 80px;
            margin: 3px;
            animation: shake 1s ease-in-out infinite;
        }
        span:nth-child(1){
            animation-delay: .1s;
        }
        span:nth-child(2){
            animation-delay: .2s;
        }
        span:nth-child(3){
            animation-delay: .3s;
        }
        span:nth-child(4){
            animation-delay: .4s;
        }
        span:nth-child(5){
            animation-delay: .5s;
        }
        span:nth-child(6){
            animation-delay: .6s;
        }
        @keyframes shake {
            0%,100%{
                transform: translateY(0px);
            }
            30% {
                transform: translateY(-30px);
            }
            60% {
                transform: translateY(0px);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <span>利</span>
        <span>物</span>
        <span>浦</span>
        <span>是</span>
        <span>冠</span>
        <span>军</span>
        <span>!</span>
    </div>
</body>
</html>