CSS 3.0文字悬停跳动特效

Posted aiguangyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 3.0文字悬停跳动特效相关的知识,希望对你有一定的参考价值。

给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 

 以下是代码实现,欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 3.0文字悬停跳动特效</title>
        <style>
            * 
                margin: 0;
                padding: 0;
            
            body 
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #000;
            

            .loader 
                position: relative;
            

            .loader span 
                position: relative;
                font-size: 2em;
                color: #fff;
                display: inline-block;
                text-transform: uppercase;
                animation: animate 2s ease-in-out infinite;
                animation-delay: calc(0.1s * var(--i));
                animation-play-state: paused;
            

            .loader:hover span 
                animation-play-state: running;
            
            @keyframes animate 

                0%,
                40%,
                100% 
                    transform: translateY(0);
                

                20% 
                    transform: translateY(-50px);
                
            
        </style>
    </head>

    <body>
        <div class="loader">
            <span style="--i:1;">A</span>
            <span style="--i:2;">n</span>
            <span style="--i:3;">i</span>
            <span style="--i:4;">m</span>
            <span style="--i:5;">a</span>
            <span style="--i:6;">t</span>
            <span style="--i:7;">i</span>
            <span style="--i:8;">o</span>
            <span style="--i:9;">n</span>
            <span style="--i:10;">_</span>
            <span style="--i:11;">P</span>
            <span style="--i:12;">l</span>
            <span style="--i:13;">a</span>
            <span style="--i:14;">y</span>
            <span style="--i:15;">_</span>
            <span style="--i:16;">S</span>
            <span style="--i:17;">t</span>
            <span style="--i:18;">a</span>
            <span style="--i:19;">t</span>
            <span style="--i:20;">e</span>
            <span style="--i:21;">.</span>
        </div>
    </body>

</html>

以上是关于CSS 3.0文字悬停跳动特效的主要内容,如果未能解决你的问题,请参考以下文章

css如何实现鼠标悬停的提示效果

纯css3鼠标悬停感知移动效果

css可以让网页文字闪烁吗?

HTML+CSS+JS实现❤️ 3D爱心跳动特效❤️

11.简单的CSS按钮悬停特效

11.简单的CSS按钮悬停特效