【WP教程】WordPress教程-WordPress美化-炫酷的文字渐变特效

03669

前言

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

教程开始

1、文字变色

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

<link rel="stylesheet" type="text/css" href="http://www.52j.top/api/css/wzbs.css">
<div class="wp52j">我要变色</div>
<link rel="stylesheet" type="text/css" href="http://www.52j.top/api/css/wzbs.css">
<div class="wp52j">我要变色</div>
<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%;
  }
}
.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%;
  }
}
.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>
<link rel="stylesheet" type="text/css" href="http://www.52j.top/api/css/wzdd.css">
<div class="shaky">我要抖动</div>
<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)
            }
        }
        .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)
            }
        }
        .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
WordPress教程WP美化
# wp美化# worspress
喜欢就支持一下吧
点赞9赞赏 分享
丁丁的头像-吾爱集钻石会员
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

用户封面
丁丁的头像-吾爱集钻石会员
【收银设备相关】明华(明泰)URF-R330 明华RF-35LT 驱动文件 思迅 商云 商锐-吾爱集
73人已阅读
【收银设备相关】明华(明泰)URF-R330 明华RF-35LT 驱动文件 思迅 商...
TOP1
【常用软件工具】Microsoft Office 2010 中文版 安装包及教程-吾爱集
【常用软件工具】Microsoft Office 2010 中文版 安装包及教程
6个月前71人已阅读
TOP2
【打印机驱动】佳博条码打印机驱动（新版）适用于佳博全系列条码打印机 58MBⅢ 驱动-吾爱集
【打印机驱动】佳博条码打印机驱动（新版）适用于佳博全系列条码打印机 58MBⅢ 驱动
6个月前54人已阅读
TOP3
【监控安防】海康威视通 设备网络搜索 V3.1.3.2-吾爱集
【监控安防】海康威视通 设备网络搜索 V3.1.3.2
7个月前56人已阅读
TOP4
【监控安防】无锡迪杰字符叠加摄像头相关文件工具-吾爱集
【监控安防】无锡迪杰字符叠加摄像头相关文件工具
7个月前50人已阅读
TOP5
【常用软件工具】Microsoft SQL Server 2012 下载及安装教程-吾爱集
【常用软件工具】Microsoft SQL Server 2012 下载及安装教程
7个月前42人已阅读
TOP6
看板娘播音管家思迅商锐思迅商旗思迅商云wp美化worspresswordpress主题wordpress
ddzz的头像-吾爱集

ddzz1年前0

表情[guzhang]-吾爱集
头像

aa1年前0

下载看看
ddzz的头像-吾爱集

ddzz1年前0

感谢分享