前言

大多数站长在使用初期，都喜欢魔改美化自己的网站，网站的建设主要方便访客高质量的阅读，所以对文章文字的显示效果比较重视，本期博主给大家出一期如何给自己的网站自定义自己喜欢的文字特效。

教程开始

1、文字变色

将以下代码添加到你的自定义html。

<link rel="stylesheet" type="text/css" href="http://www.52j.top/api/css/wzbs.css">
<div class="wp52j">我要变色</div>

注: 自定义html属于古腾堡的一个区块,如果不使用古腾堡，使用经典编辑器直接在代码添加即可。

效果：

我要变色

上面的颜色是可以自行改动的,但我怕有些人不会,就直接在这里以此把代码写好了。下面是CSS代码，可以复制后自行修改

.wp52j{
  font-size: 16px;
  background-image: -webkit-linear-gradient(90deg, #4e17df, #fb6bea 25%, #4e17df 50%, #fb6bea 75%, #4e17df);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-size: 100% 600%;
  animation: wp52j 10s linear infinite;
}

@keyframes wp52j {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -300%;
  }
}

2、文字抖动效果

将以下代码添加到你的自定义html。

<link rel="stylesheet" type="text/css" href="http://www.52j.top/api/css/wzdd.css">
<div class="shaky">我要抖动</div>

效果：

我要抖动

下面CSS是代码，可以复制后自行修改

        .shaky {
            display: inline-block;
            
            padding: 1px;
            font-size: 25px;
            color: chartreuse;
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation-name: shaky-slow;
            -ms-animation-name: shaky-slow;
            animation-name: shaky-slow;
            -webkit-animation-duration: 4s;
            -ms-animation-duration: 4s;
            animation-duration: 4s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-delay: 0s;
            -ms-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-play-state: running;
            -ms-animation-play-state: running;
            animation-play-state: running;
            
        }

        @-webkit-keyframes shaky-slow {
            0% {
                -webkit-transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg)
            }

            4% {
                -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)
            }

            6% {
                -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)
            }

            8% {
                -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)
            }

            10% {
                -webkit-transform: translate(1.4px, 0px) rotate(-2deg)
            }

            12% {
                -webkit-transform: translate(-1.3px, -1px) rotate(-2deg)
            }

            14% {
                -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)
            }

            16% {
                -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)
            }

            18% {
                -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)
            }

            20% {
                -webkit-transform: translate(1px, 1px) rotate(-0.5deg)
            }

            22% {
                -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)
            }

            24% {
                -webkit-transform: translate(-1.4px, -1px) rotate(2deg)
            }

            26% {
                -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)
            }

            28% {
                -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)
            }

            30% {
                -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
            }

            32% {
                -webkit-transform: translate(-1px, 0px) rotate(2deg)
            }

            34% {
                -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)
            }

            36% {
                -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)
            }

            38% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)
            }

            40% {
                -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)
            }

            42% {
                -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
            }

            44% {
                -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)
            }

            46% {
                -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
            }

            48% {
                -webkit-transform: translate(1px, 1.6px) rotate(1.5deg)
            }

            50% {
                -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)
            }

            52% {
                -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)
            }

            54% {
                -webkit-transform: translate(1.6px, -1px) rotate(-2deg)
            }

            56% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)
            }

            58% {
                -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)
            }

            60% {
                -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)
            }

            62% {
                -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
            }

            64% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            66% {
                -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)
            }

            68% {
                -webkit-transform: translate(0px, -1.6px) rotate(-2deg)
            }

            70% {
                -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)
            }

            72% {
                -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            74% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)
            }

            76% {
                -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)
            }

            78% {
                -webkit-transform: translate(-1px, 1.4px) rotate(2deg)
            }

            80% {
                -webkit-transform: translate(1.4px, 1.6px) rotate(2deg)
            }

            82% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
            }

            84% {
                -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)
            }

            86% {
                -webkit-transform: translate(1px, 1.4px) rotate(-2deg)
            }

            88% {
                -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
            }

            90% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            92% {
                -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            94% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            96% {
                -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)
            }

            98% {
                -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)
            }
        }

        @keyframes shaky-slow {
            0% {
                transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                transform: translate(-1px, 1.5px) rotate(1.5deg)
            }

            4% {
                transform: translate(1.3px, 0px) rotate(-0.5deg)
            }

            6% {
                transform: translate(1.4px, 1.4px) rotate(-2deg)
            }

            8% {
                transform: translate(-1.3px, -1px) rotate(-1.5deg)
            }

            10% {
                transform: translate(1.4px, 0px) rotate(-2deg)
            }

            12% {
                transform: translate(-1.3px, -1px) rotate(-2deg)
            }

            14% {
                transform: translate(1.5px, 1.3px) rotate(1.5deg)
            }

            16% {
                transform: translate(1.5px, -1.5px) rotate(-1.5deg)
            }

            18% {
                transform: translate(1.3px, -1.3px) rotate(-2deg)
            }

            20% {
                transform: translate(1px, 1px) rotate(-0.5deg)
            }

            22% {
                transform: translate(1.3px, 1.5px) rotate(-2deg)
            }

            24% {
                transform: translate(-1.4px, -1px) rotate(2deg)
            }

            26% {
                transform: translate(1.3px, -1.3px) rotate(0.5deg)
            }

            28% {
                transform: translate(1.6px, -1.6px) rotate(-1.5deg)
            }

            30% {
                transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
            }

            32% {
                transform: translate(-1px, 0px) rotate(2deg)
            }

            34% {
                transform: translate(1.3px, 1.3px) rotate(-0.5deg)
            }

            36% {
                transform: translate(1.3px, 1.6px) rotate(1.5deg)
            }

            38% {
                transform: translate(1.3px, -1.6px) rotate(1.5deg)
            }

            40% {
                transform: translate(-1.4px, -1px) rotate(-0.5deg)
            }

            42% {
                transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
            }

            44% {
                transform: translate(-1.6px, 1.4px) rotate(0.5deg)
            }

            46% {
                transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
            }

            48% {
                transform: translate(1px, 1.6px) rotate(1.5deg)
            }

            50% {
                transform: translate(1.6px, 1.6px) rotate(1.5deg)
            }

            52% {
                transform: translate(-1.4px, 1.6px) rotate(0.5deg)
            }

            54% {
                transform: translate(1.6px, -1px) rotate(-2deg)
            }

            56% {
                transform: translate(1.3px, -1.6px) rotate(-2deg)
            }

            58% {
                transform: translate(-1.3px, -1.6px) rotate(0.5deg)
            }

            60% {
                transform: translate(1.3px, 1.6px) rotate(-0.5deg)
            }

            62% {
                transform: translate(0px, 0px) rotate(-1.5deg)
            }

            64% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            66% {
                transform: translate(1.6px, -1.6px) rotate(0.5deg)
            }

            68% {
                transform: translate(0px, -1.6px) rotate(-2deg)
            }

            70% {
                transform: translate(-1.6px, 1px) rotate(1.5deg)
            }

            72% {
                transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            74% {
                transform: translate(1.3px, -1.6px) rotate(-0.5deg)
            }

            76% {
                transform: translate(1.4px, 1px) rotate(-0.5deg)
            }

            78% {
                transform: translate(-1px, 1.4px) rotate(2deg)
            }

            80% {
                transform: translate(1.4px, 1.6px) rotate(2deg)
            }

            82% {
                transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
            }

            84% {
                transform: translate(-1.4px, 1.4px) rotate(-2deg)
            }

            86% {
                transform: translate(1px, 1.4px) rotate(-2deg)
            }

            88% {
                transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
            }

            90% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            92% {
                transform: translate(-1.4px, 1.6px) rotate(2deg)
            }

            94% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            96% {
                transform: translate(-1.4px, 1.3px) rotate(-2deg)
            }

            98% {
                transform: translate(1.3px, 1px) rotate(-0.5deg)
            }
        }

教程结束

文章版权声明 1 本站文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议，与本站观点无关。
2 本站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ291560203进行删除处理。
3 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
4 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END