CSS3特效猫挂在线球上左右摇摆动画

CSS3特效猫挂在线球上左右摇摆动画是一款用CSS3做出的动画摇摆效果

<头>
<元字符集=“utf-8”>


<风格>
.all-wrap {
  -webkit-animation: bob 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
          动画： bob 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
}

。全部 {＃＃＃   顶部：10rem；
  左：calc(50% - 2.5rem);
  位置：绝对；
  宽度：5rem；
  高度：5rem；
  -webkit-transform-origin：中心-20rem;
          变换原点：中心-20rem;
  -webkit-animation: swing 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
          动画：摆动 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
}
.all:在{
之前   高度：20rem；
  宽度：2px；
  背景颜色：#DB242A;
  左：计算（50% - 1px）；
  底部：20rem；
}

.纱线{
  位置：绝对；
  顶部：0;
  左：0；
  宽度：80px；
  高度：80px；
  边界半径：50%；
  背景图像：-webkit-radial-gradient（左上角，圆圈，#e97c7f，#db242a 50％，#af1d22）;
  背景图像：径向渐变（左上角的圆圈，#e97c7f，#db242a 50%，#af1d22）；
  z 索引: 1;
}
.yarn：之前，.yarn：之后{
  位置：绝对；
  宽度：20px；
  高度：20px；
  边界半径：50%；
  背景颜色：白色；
  顶部：-1px；
}
.yarn:在{
之前   左：计算(50% + 7px);
  背景颜色：#b1bce6;
}
.yarn:{
之后   右：计算(50% + 7px);
  背景颜色：#D5E8F8;
}

.cat-wrap {
#   位置：绝对；
  顶部：0;
  左：计算(50% - 45px);
  宽度：90px；
  高度：130px；
  -webkit-animation: 反向摆动 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
          动画：反向摆动 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
  -webkit-transform-origin：顶部中心；
          变换原点：顶部中心；
}

。猫 {＃＃＃   位置：绝对；
  顶部：0;
  左：0；
  宽度：100%；
  高度：100%；
  -webkit-animation：摆动 7s 0.2s 无限两者；
          动画：摆动 7s 0.2s 无限两者；
  -webkit-transform-origin：顶部中心；
          变换原点：顶部中心；
}

.cat-upper {
  位置：绝对；
  顶部：0；
  左：0；
  宽度：100%；
  高度：100%；
  -webkit-transform-origin：顶部中心；
          变换原点：顶部中心；
  z 索引: 1;
}
.cat-upper .cat-leg {
  位置：绝对；
  宽度：20px；
  高度：100%；
  背景颜色：白色；
  z 索引：-1；
  背景图像：-webkit-线性渐变（左，#D5E8F8，#D5E8F8 20％，#8B9BD9）;
  背景图像：线性渐变（向右，#D5E8F8，#D5E8F8 20%，#8B9BD9）；
}
.cat-upper .cat-leg:nth-child(1) {
  左上边框半径：100px；
  左：10px；
}
.cat-upper .cat-leg:nth-child(1):{
之后   左：50%；
}
.cat-upper .cat-leg:nth-child(2) {
  左上边框半径：0;
  右上边框半径：100px；
  右：10px；
}
.cat-upper .cat-leg:nth-child(2):{
之后   右：50%；
}

.cat-lower-wrap {
  高度：90%；
  宽度：100%；
  位置：绝对；
  顶部：100%；
  宽度：75px；
  左：计算（50% - 37.5px）；
  -webkit-animation：反向摆动 7s 0.2s 无限两者；
          动画：反向摆动 7s 0.2s 无限两者；
  -webkit-transform-origin：顶部中心；
          变换原点：顶部中心；
}

.cat-lower {
  位置：绝对；
  顶部：0;
  左：0；
  宽度：100%；
  高度：100%；
  -webkit-animation：摆动 7s 0.5s 无限两者；
          动画：摆动 7s 0.5s 无限两者；
  -webkit-transform-origin：顶部中心；
          变换原点：顶部中心；
}
.cat-lower:{
之后   位置：绝对；
  顶部：0;
  左：0；
  宽度：100%；
  高度：100%；
  边框半径：100px；
  背景图像：-webkit-radial-gradient（10px 50px，圆形，#ffffff，#ffffff 40％，#d5e8f8 65％，#8b9bd9）;
  背景图像：径向渐变（10px 50px处的圆圈，#ffffff，#ffffff 40%，#d5e8f8 65%，#8b9bd9）；
  z 索引: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
  z 索引：-1；
  位置：绝对；
  高度：20px；
  宽度：20px；
  -webkit-animation：摆腿 7s 0.3s 无限两者；
          动画：摆腿 7s 0.3s 无限两者；
  z 索引: 1;
  -webkit-transform-origin：顶部中心；
          变换原点：顶部中心；
  左上边框半径：20px；
  右上边框半径：20px;
  背景图像：-webkit-线性渐变（左，白色，#D5E8F8，#8B9BD9）;
  背景图像：线性渐变（向右，白色，#D5E8F8，#8B9BD9）；
}
.cat-lower > .cat-leg {
#   底部：20px；
}
.cat-lower > .猫腿 .猫腿 {
  顶部：25%；
}
.cat-lower > .猫腿 + .猫腿 {
  右：0；
}
.cat-lower .cat-paw {
  顶部：50%；
  边界半径：50%；
  背景颜色：#fff;
}
.cat-lower .cat-tail {
  位置：绝对；
  高度：15px；
  宽度：10px；
  -webkit-animation: swing-tail 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
          动画：摆尾 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
  -webkit-transform-origin：顶部中心；
          变换原点：顶部中心；
  z 索引: 0;
  背景图像：-webkit-线性渐变（左，白色，#D5E8F8，#8B9BD9）;
  背景图像：线性渐变（向右，白色，#D5E8F8，#8B9BD9）；
  左下边框半径：10px；
  右下边框半径：10px;
}
.cat-lower .cat-tail > .猫尾巴{
  顶部：50%；
}
.cat-lower > .猫尾巴{
  左：计算（50% - 5px）；
  顶部：95%；
}

.cat-head {
#   宽度：90px；
  高度：90 像素；
  背景图像：-webkit-radial-gradient（10px 10px，圆形，#ffffff，#ffffff 40％，#d5e8f8 65％，#8b9bd9）;
  背景图像：径向渐变（10px 10px处的圆圈，#ffffff，#ffffff 40%，#d5e8f8 65%，#8b9bd9）；
  边界半径：50%；
  顶部：计算(100% - 45px);
}

.猫脸{
  位置：绝对；
  顶部：0;
  左：0；
  高度：100%；
  宽度：100%；
  -webkit-animation: 面对 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
          动画：面对 7s 三次贝塞尔曲线(0.5, 0, 0.5, 1) 无限两者;
  -webkit-transform-style：保留-3d;
          变换风格：preserve-3d;
  -webkit-透视：100px；
          视角：100px；
}

.猫耳朵{
  位置：绝对；
  顶部：0;
  左：0；
  高度：50%；
  宽度：100%；
  z 索引：-1；
}

.猫耳{
  宽度：20px；
  高度：100%；
  位置：绝对；
  边框半径：5px；
  顶部：-10px；
}
.cat-ear:第一个孩子 {
  左：0；
  -webkit-transform-origin：左上角；
          变换原点：左上角；
  -webkit-transform: skewY(40deg);
          变换：skewY(40deg);
  背景颜色：白色；
}
.cat-ear:first-child:之前 {
  左：0；
  右上边框半径：50%；
  右下边框半径：50%；
  背景颜色：#D7EBFB;
}
.cat-ear:最后一个孩子 {
  右：0；
  -webkit-transform-origin：右上角；
          变换原点：右上角；
  -webkit-transform: skewY(-40deg);
          变换：skewY(-40deg);
  背景颜色：#d1e6f7;
}
.cat-ear:last-child:{
之前   右：0；
  左上边框半径：50%；
  左下边框半径：50%；
  背景颜色：#e0f0fc;
}
.cat-ear:在{
之前   宽度：60%；
  高度：100%；
  顶部：10px；
  位置：绝对；
  背景颜色：#fff;
}

.猫眼{
  位置：绝对；
  顶部：50%；
  宽度：100%；
  高度：6px；
  -webkit-animation：闪烁 7 秒步进结束无限两者；
          动画：闪烁 7s 步骤结束无限两者；
}
.cat-eyes:之前, .cat-eyes:之后 {
  位置：绝对；
  高度：6px；
  宽度：6px；
  边界半径：50%；
  背景颜色：#4B4D75;
}
.cat-eyes:在{
之前   左：20px；
}
.cat-eyes:{
之后   右：20px；
}

.猫嘴{
  位置：绝对；
  宽度：12px；
  高度：8px；
  背景颜色：#4B4D75;
  顶部：60%；
  左：计算（50% - 6px）；
  左上边框半径：50% 30%;
  右上边框半径：50% 30%;
  左下边框半径：50% 70%;
  右下边框半径：50% 70%;
  -webkit-transform: 翻译Z(10px);
          变换：translateZ(10px);
}
.cat-mouth:之前, .cat-mouth:之后 {
  位置：绝对；
  宽度：90%；
  高度：100%；
  边框：2px实线#9FA2CB;
  顶部：80%；
  边框半径：100px；
  顶部边框颜色：透明；
  z 索引：-1；
}
.cat-mouth: 在 {
之前   左边框颜色：透明；
  右：计算(50% - 1px);
  -webkit-transform-origin：右上角；
          变换原点：右上角；
  -webkit-transform: 旋转(10deg);
          变换：旋转(10deg);
}
.cat-mouth:{
之后   右边框颜色：透明；
  左：计算（50% - 1px）；
  -webkit-transform-origin：左上角；
          变换原点：左上角；
  -webkit-transform: 旋转(-10deg);
          变换：旋转(-10deg);
}

.猫须{
  宽度：50%；
  高度：8px；
  位置：绝对；
  底部：25%；
  左：25%；
  -webkit-transform-style：保留-3d;
          变换风格：preserve-3d;
  -webkit-透视：60px；
          视角：60px；
}
.cat-whiskers:之前, .cat-whiskers:之后 {
  位置：绝对；
  高度：100%；
  宽度：30%；
  边框：2px实线#9FA2CB;
  左边框：无；
  右边框：无；
}
.cat-whiskers:在{
之前   右：100%；
  -webkit-transform-origin：右中心；
          变换原点：右中心；
  -webkit-transform：rotateY（70deg）rotateZ（-10deg）;
          变换：旋转Y(70度)旋转Z(-10度);
}
.cat-whiskers:{
之后   左：100%；
  -webkit-transform-origin：左中心；
          变换原点：左中心；
  -webkit-transform：rotateY（-70deg）rotateZ（10deg）;
          变换：旋转Y(-70度)旋转Z(10度);
}

@-webkit-keyframes 鲍勃 {
  0% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  6.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  12.5% {
    -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  18.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  25% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  31.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  37.5% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  43.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  50% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  56.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  62.5% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  68.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  75% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  81.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  87.5% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  93.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  100% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
}

@关键帧鲍勃{
  0% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  6.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  12.5% {
    -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  18.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  25% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  31.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  37.5% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  43.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  50% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  56.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  62.5% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  68.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  75% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  81.25% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  87.5% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
  93.75% {
#     -webkit-transform: 翻译Y(-0.4rem);
            变换：translateY(-0.4rem);
  }
  100% {
#     -webkit-transform: 翻译Y(0.4rem);
            变换：translateY(0.4rem);
  }
}
@-webkit-keyframes swing {
  0% {
#     -webkit-transform: 旋转(5deg);
            变换：旋转(5deg);
  }
  12.5% {
    -webkit-transform: 旋转(-10deg);
            变换：旋转(-10deg);
  }
  25% {
#     -webkit-transform: 旋转(10deg);
            变换：旋转(10deg);
  }
  37.5% {
#     -webkit-transform: 旋转(-15deg);
            变换：旋转(-15deg);
  }
  50% {
#     -webkit-transform: 旋转(23deg);
            变换：旋转(23deg);
  }
  62.5% {
#     -webkit-transform: 旋转(-23deg);
            变换：旋转(-23deg);
  }
  75% {
#     -webkit-transform: 旋转(15deg);
            变换：旋转(15deg);
  }
  87.5% {
#     -webkit-transform: 旋转(-10deg);
            变换：旋转(-10deg);
  }
  100% {
#     -webkit-transform: 旋转(5deg);
            变换：旋转(5deg);
  }
}
@关键帧摆动{
  0% {
#     -webkit-transform: 旋转(5deg);
            变换：旋转(5deg);
  }
  12.5% {
    -webkit-transform: 旋转(-10deg);
            变换：旋转(-10deg);
  }
  25% {
#     -webkit-transform: 旋转(10deg);
            变换：旋转(10deg);
  }
  37.5% {
#     -webkit-transform: 旋转(-15deg);
            变换：旋转(-15deg);
  }
  50% {
#     -webkit-transform: 旋转(23deg);
            变换：旋转(23deg);
  }
  62.5% {
#     -webkit-transform: 旋转(-23deg);
            变换：旋转(-23deg);
  }
  75% {
#     -webkit-transform: 旋转(15deg);
            变换：旋转(15deg);
  }
  87.5% {
#     -webkit-transform: 旋转(-10deg);
            变换：旋转(-10deg);
  }
  100% {
#     -webkit-transform: 旋转(5deg);
            变换：旋转(5deg);
  }
}
@-webkit-keyframes 摆腿 {
  0% {
#     -webkit-transform: 旋转(0.5deg);
            变换：旋转(0.5deg);
  }
  12.5% {
    -webkit-transform: 旋转(-1deg);
            变换：旋转(-1deg);
  }
  25% {
#     -webkit-transform: 旋转(1deg);
            变换：旋转（1deg）；
  }
  37.5% {
#     -webkit-transform: 旋转(-1.5deg);
            变换：旋转(-1.5deg);
  }
  50% {
#     -webkit-transform: 旋转(2.3deg);
            变换：旋转(2.3deg);
  }
  62.5% {
#    -webkit-transform: 旋转(-2.3deg);
            变换：旋转(-2.3deg);
  }
  75% {
#     -webkit-transform: 旋转(1.5deg);
            变换：旋转(1.5deg);
  }
  87.5% {
#     -webkit-transform: 旋转(-1deg);
            变换：旋转(-1deg);
  }
  100% {
#     -webkit-transform: 旋转(0.5deg);
            变换：旋转(0.5deg);
  }
}
@keyframes 摆腿 {
  0% {
#     -webkit-transform: 旋转(0.5deg);
            变换：旋转(0.5deg);
  }
  12.5% {
    -webkit-transform: 旋转(-1deg);
            变换：旋转(-1deg);
  }
  25% {
#     -webkit-transform: 旋转(1deg);
            变换：旋转（1deg）；
  }
  37.5% {
#     -webkit-transform: 旋转(-1.5deg);
            变换：旋转(-1.5deg);
  }
  50% {
#     -webkit-transform: 旋转(2.3deg);
            变换：旋转(2.3deg);
  }
  62.5% {
#     -webkit-transform: 旋转(-2.3deg);
            变换：旋转(-2.3deg);
  }
  75% {
#     -webkit-transform: 旋转(1.5deg);
            变换：旋转(1.5deg);
  }
  87.5% {
#     -webkit-transform: 旋转(-1deg);
            变换：旋转(-1deg);
  }
  100% {
#     -webkit-transform: 旋转(0.5deg);
            变换：旋转(0.5deg);
  }
}
@-webkit-keyframes swing-tail {
  0% {
#     -webkit-transform: 旋转(-2deg);
            变换：旋转(-2deg);
  }
  12.5% {
    -webkit-transform: 旋转(4deg);
            变换：旋转(4deg);
  }
  25% {
#     -webkit-transform: 旋转(-4deg);
            变换：旋转(-4deg);
  }
  37.5% {
#     -webkit-transform: 旋转(6deg);
            变换：旋转（6deg）；
  }
  50% {
#     -webkit-transform: 旋转(-9.2deg);
            变换：旋转(-9.2deg);
  }
  62.5% {
#     -webkit-transform: 旋转(9.2deg);
            变换：旋转(9.2deg);
  }
  75% {
#     -webkit-transform: 旋转(-6deg);
            变换：旋转(-6deg);
  }
  87.5% {
#     -webkit-transform: 旋转(4deg);
            变换：旋转(4deg);
  }
  100% {
#     -webkit-transform: 旋转(-2deg);
            变换：旋转(-2deg);
  }
}
@keyframes 摆动尾部 {
  0% {
#     -webkit-transform: 旋转(-2deg);
            变换：旋转(-2deg);
  }
  12.5% {
    -webkit-transform: 旋转(4deg);
            变换：旋转(4deg);
  }
  25% {
#     -webkit-transform: 旋转(-4deg);
            变换：旋转(-4deg);
  }
  37.5% {
#     -webkit-transform: 旋转(6deg);
            变换：旋转（6deg）；
  }
  50% {
#     -webkit-transform: 旋转(-9.2deg);
            变换：旋转(-9.2deg);
  }
  62.5% {
#     -webkit-transform: 旋转(9.2deg);
            变换：旋转(9.2deg);
  }
  75% {
#     -webkit-transform: 旋转(-6deg);
            变换：旋转(-6deg);
  }
  87.5% {
#     -webkit-transform: 旋转(4deg);
            变换：旋转(4deg);
  }
  100% {
#     -webkit-transform: 旋转(-2deg);
            变换：旋转(-2deg);
  }
}
@-webkit-keyframes 反向摆动 {
  0% {
#     -webkit-transform: 旋转(-5deg);
            变换：旋转(-5deg);
  }
  12.5% {
    -webkit-transform: 旋转(10deg);
            变换：旋转(10deg);
  }
  25% {
#     -webkit-transform: 旋转(-10deg);
            变换：旋转(-10deg);
  }
  37.5% {
#     -webkit-transform: 旋转(15deg);
            变换：旋转(15deg);
  }
  50% {
#     -webkit-transform: 旋转(-23deg);
            变换：旋转(-23deg);
  }
  62.5% {
#     -webkit-transform: 旋转(23deg);
            变换：旋转(23deg);
  }
  75% {
#     -webkit-transform: 旋转(-15deg);
            变换：旋转(-15deg);
  }
  87.5% {
#     -webkit-transform: 旋转(10deg);
            变换：旋转(10deg);
  }
  100% {
#     -webkit-transform: 旋转(-5deg);
            变换：旋转(-5deg);
  }
}
@keyframes 反向摆动 {
  0% {
#     -webkit-transform: 旋转(-5deg);
            变换：旋转(-5deg);
  }
  12.5% {
    -webkit-transform: 旋转(10deg);
            变换：旋转(10deg);
  }
  25% {
#     -webkit-transform: 旋转(-10deg);
            变换：旋转(-10deg);
  }
  37.5% {
#     -webkit-transform: 旋转(15deg);
            变换：旋转(15deg);
  }
  50% {
#     -webkit-transform: 旋转(-23deg);
            变换：旋转(-23deg);
  }
  62.5% {
#     -webkit-transform: 旋转(23deg);
            变换：旋转(23deg);
  }
  75% {
#     -webkit-transform: 旋转(-15deg);
            变换：旋转(-15deg);
  }
  87.5% {
#     -webkit-transform: 旋转(10deg);
            变换：旋转(10deg);
  }
  100% {
#     -webkit-transform: 旋转(-5deg);
            变换：旋转(-5deg);
  }
}
@-webkit-keyframes 面对 {
  0% {
#     -webkit-transform：translateX(-2.5px);
            变换：translateX(-2.5px);
  }
  12.5% {
    -webkit-transform：translateX(5px);
            变换：translateX(5px);
  }
  25% {
#     -webkit-transform：translateX(-5px);
            变换：translateX(-5px);
  }
  37.5% {
#     -webkit-transform：translateX(7.5px);
            变换：translateX(7.5px);
  }
  50% {
#     -webkit-transform：translateX(-11.5px);
            变换：translateX(-11.5px);
  }
  62.5% {
#     -webkit-transform：translateX(11.5px);
            变换：translateX(11.5px);
  }
  75% {
#     -webkit-transform：translateX(-7.5px);
            变换：translateX(-7.5px);
  }
  87.5% {
#     -webkit-transform：translateX(5px);
            变换：translateX(5px);
  }
  100% {
#     -webkit-transform：translateX(-2.5px);
            变换：translateX(-2.5px);
  }
}
@关键帧脸{
  0% {
#     -webkit-transform：translateX(-2.5px);
            变换：translateX(-2.5px);
  }
  12.5% {
    -webkit-transform：translateX(5px);
            变换：translateX(5px);
  }
  25% {
#     -webkit-transform：translateX(-5px);
            变换：translateX(-5px);
  }
  37.5% {
#     -webkit-transform：translateX(7.5px);
            变换：translateX(7.5px);
  }
  50% {
#     -webkit-transform：translateX(-11.5px);
            变换：translateX(-11.5px);
  }
  62.5% {
#     -webkit-transform：translateX(11.5px);
            变换：translateX(11.5px);
  }
  75% {
#     -webkit-transform：translateX(-7.5px);
            变换：translateX(-7.5px);
  }
  87.5% {
#     -webkit-transform：translateX(5px);
            变换：translateX(5px);
  }
  100% {
#     -webkit-transform：translateX(-2.5px);
            变换：translateX(-2.5px);
  }
}
@-webkit-keyframes 淡入 {
  从 {＃＃＃     不透明度：0；
  }
  到 {＃＃＃     不透明度：1；
  }
}
@关键帧淡入{
  从 {＃＃＃     不透明度：0；
  }
  到 {＃＃＃     不透明度：1；
  }
}
@-webkit-keyframes 闪烁 {
  从、到、10%、25%、80% {
    -webkit-transform:scaleY(1);
            变换：scaleY(1);
  }
  8%、23%、78% {
    -webkit-transform:scaleY(0.1);
            变换：scaleY(0.1);
  }
}
@关键帧闪烁{
  从、到、10%、25%、80% {
    -webkit-transform:scaleY(1);
            变换：scaleY(1);
  }
  8%、23%、78% {
    -webkit-transform:scaleY(0.1);
            变换：scaleY(0.1);
  }
}
正文，html {
  高度：100%；
  宽度：100%；
  边距：0；
  填充：0;
  背景颜色：#1F1F3C;
  溢出：隐藏；
}

*, *:之前, *:之后 {
  框大小：边框框；
  位置：相对；
  -webkit-animation-timing-function: 三次贝塞尔曲线(0.5, 0, 0.5, 1);
          动画计时函数：cubic-bezier(0.5, 0, 0.5, 1);
  -webkit-animation-fill-mode：两者；
          动画填充模式：两者；
}

*：之前，*：{
之后   内容： '';＃＃＃   显示：块；
}