跳动的文字(文字渲染).html( 网上收集的1)

一百减一是零

已于 2023-11-28 16:02:26 修改

阅读量72

点赞数

分类专栏： vue==前端文章标签： html 前端

于 2023-11-28 14:43:00 首次发布

本文链接：https://blog.csdn.net/weixin_59383491/article/details/134667168

版权

vue==前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳动的文字</title>
    <style>
        #m1:hover {
            animation: shine 1s linear infinite;
        }

        @keyframes shine {
            0% {
                color: #fff;
            }
            50% {
                color: #0000ff;
            }
            100% {
                color: #fff;
            }
        }
        /*m2*/
        #m2 {
            transition: all 1s;
            filter: blur(0px);
        }

        #m2:hover {
            filter: blur(3px);
        }
        /*m2*/
        /*m3*/
        #m3:hover {
            transform: skewX(-10deg);
        }

        /*m3*/
        /*m4*/
        #m4 {
            transition: all 1s;
            padding-left: 0;
        }

        #m4:hover {
            padding-left: 50px;
        }

        /*m4*/
        /*m5*/
        #m5 {
            background-image: linear-gradient(45deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        #m5:hover {
            background-position: 0% 50%;
        }

        /*m5*/
        /*m6*/
        #m6 {
            transition: all 0.5s;
            color: #000;
        }

        #m6:hover {
            color: #f00;
            transform: scale(1.2);
        }

        /*m6*/
        /*m7*/
        #m7 {
            transition: all 0.5s;
            border: 2px solid #000;
            padding: 10px;
        }

        #m7:hover {
            border: 10px solid #f00;
            padding: 20px;
        }

        /*m7*/
        /*m8*/
        #m8 {
            position: relative;
            overflow: hidden;
        }

        #m8:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background-color: #f00;
            transition: all 0.5s;
        }

        #m8:hover:after {
            left: 0;
        }

        /*m8*/

        /*m9*/
        #m9 {
            overflow: hidden;
            border-right: 0.15em solid #f00;
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: 0.15em;
            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
            font-size: 1.5em;
            font-weight: 800;
        }

        @keyframes typing {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }

        @keyframes blink-caret {
            from, to {
                border-color: transparent;
            }
            50% {
                border-color: #f00;
            }
        }
        /*m9*/
        #m10 {
            transition: all 3.5s;
        }

        #m10:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<h1 id="m1">闪耀文字</h1>
<h1 id="m2">模糊文字</h1>
<h1 id="m3">变形文字</h1>
<h1 id="m4">移动文字</h1>
<h1 id="m5">彩虹文字</h1>
<h1 id="m6">突出文字</h1>
<h1 id="m7">边框文字</h1>
<h1 id="m8">暴露文字</h1>
<h1 id="m9">打字文字</h1>
<h1 id="m10">旋转文字</h1>

</body>
</html>