CSS实现盒子上下频繁抖动

最新推荐文章于 2023-07-05 11:26:43 发布

臧小川

最新推荐文章于 2023-07-05 11:26:43 发布

阅读量778

点赞数

分类专栏： CSS HTML

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/119996007

版权

css html5 html

CSS 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

加个动画就能实现实际中不需要底下那么多代码

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 h2 h3 h4 h5 h6 {
      line-height: 2 !important;
      margin: 30px 0 15px !important;
    }

    h1 {
      cursor: pointer;
      display: block;
      font-size: 2em;
      margin-block-start: 0.67em;
      margin-block-end: 0.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
    }

    .postTitle {
      color: pink;
      font-size: 30px;
      font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif;
      font-weight: 500;
      padding: 0;
      background-image: none;
      display: inline-block;
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation-name: shake-slow;
      -ms-animation-name: shake-slow;
      animation-name: shake-slow;
      -webkit-animation-duration: 5s;
      -ms-animation-duration: 5s;
      animation-duration: 5s;
      -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;
    }


    a {
      text-decoration: none;
      padding-bottom: 2px;
      color: #e06c75;
      -webkit-transition: 0.3s;
    }

    a:hover {
      color: #67c3e5;
    }

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

      2% {
        transform: translate(6px, -7px) rotate(2.5deg);
      }

      4% {
        transform: translate(8px, -8px) rotate(2.5deg);
      }

      6% {
        transform: translate(1px, -8px) rotate(-3.5deg);
      }

      8% {
        transform: translate(-3px, 4px) rotate(-0.5deg);
      }

      10% {
        transform: translate(0px, -3px) rotate(1.5deg);
      }

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

      14% {
        transform: translate(6px, 6px) rotate(-1.5deg);
      }

      16% {
        transform: translate(-7px, 4px) rotate(-0.5deg);
      }

      18% {
        transform: translate(7px, 8px) rotate(-3.5deg);
      }

      20% {
        transform: translate(-6px, 2px) rotate(1.5deg);
      }

      22% {
        transform: translate(9px, 5px) rotate(-1.5deg);
      }

      24% {
        transform: translate(7px, -2px) rotate(0.5deg);
      }

      26% {
        transform: translate(-7px, -10px) rotate(-0.5deg);
      }

      28% {
        transform: translate(-10px, -8px) rotate(-1.5deg);
      }

      30% {
        transform: translate(8px, 4px) rotate(0.5deg);
      }

      32% {
        transform: translate(0px, 4px) rotate(1.5deg);
      }

      34% {
        transform: translate(-8px, 6px) rotate(-0.5deg);
      }

      36% {
        transform: translate(-5px, 7px) rotate(1.5deg);
      }

      38% {
        transform: translate(-4px, -4px) rotate(-1.5deg);
      }

      40% {
        transform: translate(9px, 4px) rotate(-1.5deg);
      }

      42% {
        transform: translate(9px, -5px) rotate(2.5deg);
      }

      44% {
        transform: translate(-5px, -4px) rotate(-2.5deg);
      }

      46% {
        transform: translate(7px, -7px) rotate(1.5deg);
      }

      48% {
        transform: translate(-5px, 8px) rotate(0.5deg);
      }

      50% {
        transform: translate(9px, 1px) rotate(-1.5deg);
      }

      52% {
        transform: translate(-9px, -5px) rotate(-3.5deg);
      }

      54% {
        transform: translate(-2px, 9px) rotate(1.5deg);
      }

      56% {
        transform: translate(6px, -1px) rotate(1.5deg);
      }

      58% {
        transform: translate(-6px, 0px) rotate(-0.5deg);
      }

      60% {
        transform: translate(3px, 1px) rotate(1.5deg);
      }

      62% {
        transform: translate(5px, -7px) rotate(-0.5deg);
      }

      64% {
        transform: translate(9px, 2px) rotate(2.5deg);
      }

      66% {
        transform: translate(6px, 0px) rotate(-2.5deg);
      }

      68% {
        transform: translate(5px, -4px) rotate(-2.5deg);
      }

      70% {
        transform: translate(-8px, 5px) rotate(-2.5deg);
      }

      72% {
        transform: translate(-6px, -2px) rotate(0.5deg);
      }

      74% {
        transform: translate(-3px, 7px) rotate(-3.5deg);
      }

      76% {
        transform: translate(-7px, -8px) rotate(-3.5deg);
      }

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

      80% {
        transform: translate(8px, 6px) rotate(-2.5deg);
      }

      82% {
        transform: translate(-2px, -9px) rotate(2.5deg);
      }

      84% {
        transform: translate(8px, -10px) rotate(-0.5deg);
      }

      86% {
        transform: translate(-6px, 0px) rotate(2.5deg);
      }

      88% {
        transform: translate(-1px, 9px) rotate(-3.5deg);
      }

      90% {
        transform: translate(-7px, 8px) rotate(1.5deg);
      }

      92% {
        transform: translate(-10px, -8px) rotate(0.5deg);
      }

      94% {
        transform: translate(-8px, 6px) rotate(1.5deg);
      }

      96% {
        transform: translate(4px, -9px) rotate(2.5deg);
      }

      98% {
        transform: translate(-4px, 9px) rotate(0.5deg);
      }
    }
  </style>
</head>

<body>
  <div>
    <h1 class="postTitle">
      <a href="https://blog.csdn.net/chuan0106?spm=1011.2124.3001.5343">
        <span>我套你猴子</span>
      </a>
    </h1>
  </div>
</body>

</html>

臧小川

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS实现盒子上下频繁抖动

加个动画就能实现实际中不需要底下那么多代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.
复制链接

扫一扫