文章目录

    CSS - 不停抖动的样式

    (。・∀・)ノ゙♥

    看到很多博客网站底部都有一个抖动的小表情 (。・∀・)ノ゙♥
    觉得很萌,于是扒了下来,并添加到了本站 footer 中。

    html 代码

    <div class="shaky">(。・∀・)ノ゙♥</div>

    css 代码

    .shaky {
      display: inline-block;
      padding: 1px;
      font-size: 12px;
      -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)
      }
    }
    demo
    返回文章列表 打赏
    本页链接的二维码
    打赏二维码
    期待你的评论