跳动的文字(文字渲染).html( 网上收集的1)-阿里云开发者社区

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

2024-04-18 26

版权

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

简介： 跳动的文字(文字渲染).html( 网上收集的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>

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景