<section class="section carrot" style="position: absolute;">        <h1>抖动方式</h1>        <ul class="previews">            <li>                <i class="preview-item shake">                    Bs                    <span class="flip">                    </span>                </i>                <p class="preview-desc">基本抖动</p>            </li>                    <li>                <i class="preview-item shake shake-constant">                    ?                    <span class="flip"></span>                </i>                <p class="preview-desc">抖动不停</p>            </li>        </ul>    </section>

/*绕着图片那个点旋转*/.shake { display: inline-block;    -webkit-transform-origin: center center;    -ms-transform-origin: center center;    transform-origin: center center; }/*基本抖动*/.shake:hover { -webkit-animation-name: shake-base;    -ms-animation-name: shake-base;    animation-name: shake-base;    -webkit-animation-duration: 100ms;     -ms-animation-duration: 100ms;     animation-duration: 100ms;    -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;   }  /*抖动不停*/  .shake.shake-constant {     -webkit-animation-name: shake-base;    -ms-animation-name: shake-base;    animation-name: shake-base;     -webkit-animation-duration: 100ms;    -ms-animation-duration: 100ms;     animation-duration: 100ms;     -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;  } /*keyframes 动画*/@-webkit-keyframes shake-base {  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }  2% { -webkit-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }  4% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }  6% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }  8% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }  10% { -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }  12% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }  14% { -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg); }  16% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); }  18% { -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }  20% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }  22% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }  24% { -webkit-transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }  26% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }  28% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }  30% { -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }  32% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }  34% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }  36% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }  38% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }  40% { -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg); }  42% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }  44% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }  46% { -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }  48% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }  50% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }  52% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }  54% { -webkit-transform: translate(1.5px, 0.5px) rotate(-1.5deg); }  56% { -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }  58% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }  60% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }  62% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg); }  64% { -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }  66% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }  68% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }  70% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }  72% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }  74% { -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }  76% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }  78% { -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg); }  80% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }  82% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }  84% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }  86% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }  88% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }  90% { -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }  92% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }  94% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }  96% { -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg); }  98% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } }