CSS实现颤抖功能

2018-02-27 11:06:53来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

CSS实现颤抖功能,原理十分简单,CSS3的动画效果叠加展示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        html, body, div, span, applet, object, iframe,        h1, h2, h3, h4, h5, h6, p, blockquote, pre,        a, abbr, acronym, address, big, cite, code,        del, dfn, em, img, ins, kbd, q, s, samp,        small, strike, strong, sub, sup, tt, var,        b, u, i, center,        dl, dt, dd, ol, ul, li,        fieldset, form, label, legend,        table, caption, tbody, tfoot, thead, tr, th, td,        article, aside, canvas, details, embed,        figure, figcaption, footer, header, hgroup,        menu, nav, output, ruby, section, summary,        time, mark, audio, video {            margin: 0;            padding: 0;            border: 0;            font: inherit;            font-size: 100%;            vertical-align: baseline;        }        html {            line-height: 1;        }        ol, ul {            list-style: none;        }        table {            border-collapse: collapse;            border-spacing: 0;        }        caption, th, td {            text-align: left;            font-weight: normal;            vertical-align: middle;        }        q, blockquote {            quotes: none;        }        q:before, q:after, blockquote:before, blockquote:after {            content: "";            content: none;        }        a img {            border: none;        }        article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {            display: block;        }        .shake {            display: inline-block;            transform-origin: center center;        }        .shake:hover {            animation-name: shake-base;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez {            animation-name: shake-base;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;            animation-play-state: paused;        }        .shake.freez.shake-hard {            animation-name: shake-hard;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez.shake-slow {            animation-name: shake-slow;            animation-duration: 5s;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez.shake-little {            animation-name: shake-little;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez.shake-horizontal {            animation-name: shake-horizontal;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez.shake-vertical {            animation-name: shake-vertical;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez.shake-rotate {            animation-name: shake-rotate;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez.shake-opacity {            animation-name: shake-opacity;            animation-duration: 200ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez.shake-crazy {            animation-name: shake-crazy;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.freez:hover {            animation-play-state: running;        }        .shake.shake-hard:hover {            animation-name: shake-hard;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-slow:hover {            animation-name: shake-slow;            animation-duration: 5s;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-little:hover {            animation-name: shake-little;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-horizontal:hover {            animation-name: shake-horizontal;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-vertical:hover {            animation-name: shake-vertical;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-rotate:hover {            animation-name: shake-rotate;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-opacity:hover {            animation-name: shake-opacity;            animation-duration: 200ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-crazy:hover {            animation-name: shake-crazy;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant {            animation-name: shake-base;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-hard {            animation-name: shake-hard;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-slow {            animation-name: shake-slow;            animation-duration: 5s;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-little {            animation-name: shake-little;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-horizontal {            animation-name: shake-horizontal;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-vertical {            animation-name: shake-vertical;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-rotate {            animation-name: shake-rotate;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-opacity {            animation-name: shake-opacity;            animation-duration: 200ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.shake-crazy {            animation-name: shake-crazy;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 0s;        }        .shake.shake-constant.hover-stop:hover {            animation-play-state: paused;        }        .shake.shake-delay {            animation-name: shake-base;            animation-duration: 100ms;            animation-iteration-count: infinite;            animation-timing-function: ease-in-out;            animation-delay: 4s;        }        @keyframes shake-base {            0% {                transform: translate(0px, 0px) rotate(0deg);            }            2% {                transform: translate(2.5px, -1.5px) rotate(0.5deg);            }            4% {                transform: translate(1.5px, 1.5px) rotate(-0.5deg);            }            6% {                transform: translate(2.5px, -0.5px) rotate(1.5deg);            }            8% {                transform: translate(1.5px, 1.5px) rotate(-0.5deg);            }            10% {                transform: translate(-0.5px, -1.5px) rotate(0.5deg);            }            12% {                transform: translate(-1.5px, -1.5px) rotate(0.5deg);            }            14% {                transform: translate(0.5px, -1.5px) rotate(-0.5deg);            }            16% {                transform: translate(0.5px, 1.5px) rotate(1.5deg);            }            18% {                transform: translate(1.5px, 1.5px) rotate(1.5deg);            }            20% {                transform: translate(1.5px, 0.5px) rotate(-0.5deg);            }            22% {                transform: translate(0.5px, 2.5px) rotate(-0.5deg);            }            24% {                transform: translate(2.5px, -1.5px) rotate(1.5deg);            }            26% {                transform: translate(2.5px, 0.5px) rotate(1.5deg);            }            28% {                transform: translate(-0.5px, -0.5px) rotate(-0.5deg);            }            30% {                transform: translate(-1.5px, 0.5px) rotate(-0.5deg);            }            32% {                transform: translate(-0.5px, -1.5px) rotate(-0.5deg);            }            34% {                transform: translate(1.5px, 1.5px) rotate(-0.5deg);            }            36% {                transform: translate(-1.5px, -0.5px) rotate(0.5deg);            }            38% {                transform: translate(2.5px, 0.5px) rotate(-0.5deg);            }            40% {                transform: translate(-0.5px, 2.5px) rotate(1.5deg);            }            42% {                transform: translate(-1.5px, -0.5px) rotate(0.5deg);            }            44% {                transform: translate(2.5px, -0.5px) rotate(1.5deg);            }            46% {                transform: translate(-1.5px, 2.5px) rotate(-0.5deg);            }            48% {                transform: translate(-1.5px, 1.5px) rotate(1.5deg);            }            50% {                transform: translate(-0.5px, 0.5px) rotate(0.5deg);            }            52% {                transform: translate(-1.5px, 0.5px) rotate(-0.5deg);            }            54% {                transform: translate(-0.5px, -1.5px) rotate(1.5deg);            }            56% {                transform: translate(0.5px, -1.5px) rotate(0.5deg);            }            58% {                transform: translate(1.5px, 2.5px) rotate(-0.5deg);            }            60% {                transform: translate(-1.5px, 0.5px) rotate(1.5deg);            }            62% {                transform: translate(-0.5px, 2.5px) rotate(0.5deg);            }            64% {                transform: translate(-1.5px, 1.5px) rotate(-0.5deg);            }            66% {                transform: translate(1.5px, 2.5px) rotate(1.5deg);            }            68% {                transform: translate(-0.5px, -0.5px) rotate(1.5deg);            }            70% {                transform: translate(-0.5px, 2.5px) rotate(1.5deg);            }            72% {                transform: translate(2.5px, 2.5px) rotate(1.5deg);            }            74% {                transform: translate(0.5px, 0.5px) rotate(1.5deg);            }            76% {                transform: translate(-0.5px, 2.5px) rotate(0.5deg);            }            78% {                transform: translate(-1.5px, -0.5px) rotate(1.5deg);            }            80% {                transform: translate(2.5px, -1.5px) rotate(0.5deg);            }            82% {                transform: translate(0.5px, -0.5px) rotate(0.5deg);            }            84% {                transform: translate(0.5px, 0.5px) rotate(0.5deg);            }            86% {                transform: translate(2.5px, -0.5px) rotate(-0.5deg);            }            88% {                transform: translate(2.5px, 2.5px) rotate(1.5deg);            }            90% {                transform: translate(0.5px, 0.5px) rotate(1.5deg);            }            92% {                transform: translate(0.5px, -0.5px) rotate(-0.5deg);            }            94% {                transform: translate(2.5px, 1.5px) rotate(-0.5deg);            }            96% {                transform: translate(0.5px, -0.5px) rotate(0.5deg);            }            98% {                transform: translate(2.5px, 1.5px) rotate(1.5deg);            }        }        @keyframes shake-little {            0% {                transform: translate(0px, 0px) rotate(0deg);            }            2% {                transform: translate(1px, 0px) rotate(0.5deg);            }            4% {                transform: translate(0px, 1px) rotate(0.5deg);            }            6% {                transform: translate(1px, 0px) rotate(0.5deg);            }            8% {                transform: translate(0px, 1px) rotate(0.5deg);            }            10% {                transform: translate(1px, 0px) rotate(0.5deg);            }            12% {                transform: translate(0px, 1px) rotate(0.5deg);            }            14% {                transform: translate(0px, 1px) rotate(0.5deg);            }            16% {                transform: translate(1px, 0px) rotate(0.5deg);            }            18% {                transform: translate(0px, 1px) rotate(0.5deg);            }            20% {                transform: translate(0px, 0px) rotate(0.5deg);            }            22% {                transform: translate(0px, 0px) rotate(0.5deg);            }            24% {                transform: translate(0px, 0px) rotate(0.5deg);            }            26% {                transform: translate(0px, 0px) rotate(0.5deg);            }            28% {                transform: translate(1px, 0px) rotate(0.5deg);            }            30% {                transform: translate(0px, 1px) rotate(0.5deg);            }            32% {                transform: translate(0px, 0px) rotate(0.5deg);            }            34% {                transform: translate(0px, 0px) rotate(0.5deg);            }            36% {                transform: translate(0px, 0px) rotate(0.5deg);            }            38% {                transform: translate(0px, 1px) rotate(0.5deg);            }            40% {                transform: translate(0px, 0px) rotate(0.5deg);            }            42% {                transform: translate(1px, 0px) rotate(0.5deg);            }            44% {                transform: translate(1px, 0px) rotate(0.5deg);            }            46% {                transform: translate(1px, 1px) rotate(0.5deg);            }            48% {                transform: translate(1px, 0px) rotate(0.5deg);            }            50% {                transform: translate(0px, 0px) rotate(0.5deg);            }            52% {                transform: translate(1px, 1px) rotate(0.5deg);            }            54% {                transform: translate(1px, 0px) rotate(0.5deg);            }            56% {                transform: translate(0px, 0px) rotate(0.5deg);            }            58% {                transform: translate(1px, 0px) rotate(0.5deg);            }            60% {                transform: translate(1px, 1px) rotate(0.5deg);            }            62% {                transform: translate(1px, 1px) rotate(0.5deg);            }            64% {                transform: translate(1px, 1px) rotate(0.5deg);            }            66% {                transform: translate(1px, 1px) rotate(0.5deg);            }            68% {                transform: translate(0px, 1px) rotate(0.5deg);            }            70% {                transform: translate(0px, 0px) rotate(0.5deg);            }            72% {                transform: translate(1px, 1px) rotate(0.5deg);            }            74% {                transform: translate(1px, 0px) rotate(0.5deg);            }            76% {                transform: translate(1px, 0px) rotate(0.5deg);            }            78% {                transform: translate(1px, 1px) rotate(0.5deg);            }            80% {                transform: translate(0px, 0px) rotate(0.5deg);            }            82% {                transform: translate(0px, 1px) rotate(0.5deg);            }            84% {                transform: translate(0px, 1px) rotate(0.5deg);            }            86% {                transform: translate(1px, 1px) rotate(0.5deg);            }            88% {                transform: translate(1px, 0px) rotate(0.5deg);            }            90% {                transform: translate(0px, 0px) rotate(0.5deg);            }            92% {                transform: translate(0px, 0px) rotate(0.5deg);            }            94% {                transform: translate(1px, 0px) rotate(0.5deg);            }            96% {                transform: translate(1px, 0px) rotate(0.5deg);            }            98% {                transform: translate(1px, 1px) rotate(0.5deg);            }        }        @keyframes shake-slow {            0% {                transform: translate(0px, 0px) rotate(0deg);            }            2% {                transform: translate(-2px, 3px) rotate(0.5deg);            }            4% {                transform: translate(-1px, -1px) rotate(0.5deg);            }            6% {                transform: translate(6px, -6px) rotate(-1.5deg);            }            8% {                transform: translate(0px, 7px) rotate(-0.5deg);            }            10% {                transform: translate(1px, 5px) rotate(1.5deg);            }            12% {                transform: translate(9px, -6px) rotate(-0.5deg);            }            14% {                transform: translate(-1px, -3px) rotate(0.5deg);            }            16% {                transform: translate(6px, -4px) rotate(-2.5deg);            }            18% {                transform: translate(-1px, -4px) rotate(-1.5deg);            }            20% {                transform: translate(-3px, 5px) rotate(-0.5deg);            }            22% {                transform: translate(-2px, 8px) rotate(0.5deg);            }            24% {                transform: translate(-6px, -1px) rotate(-1.5deg);            }            26% {                transform: translate(-7px, -3px) rotate(2.5deg);            }            28% {                transform: translate(-3px, 7px) rotate(0.5deg);            }            30% {                transform: translate(-8px, 0px) rotate(0.5deg);            }            32% {                transform: translate(-2px, 0px) rotate(0.5deg);            }            34% {                transform: translate(4px, 9px) rotate(0.5deg);            }            36% {                transform: translate(7px, 1px) rotate(0.5deg);            }            38% {                transform: translate(3px, 1px) rotate(2.5deg);            }            40% {                transform: translate(1px, -3px) rotate(0.5deg);            }            42% {                transform: translate(-8px, 5px) rotate(2.5deg);            }            44% {                transform: translate(7px, 6px) rotate(2.5deg);            }            46% {                transform: translate(0px, -1px) rotate(-1.5deg);            }            48% {                transform: translate(3px, -5px) rotate(-1.5deg);            }            50% {                transform: translate(10px, 5px) rotate(1.5deg);            }            52% {                transform: translate(-9px, -4px) rotate(1.5deg);            }            54% {                transform: translate(-8px, 7px) rotate(-1.5deg);            }            56% {                transform: translate(-3px, 9px) rotate(-1.5deg);            }            58% {                transform: translate(2px, 0px) rotate(2.5deg);            }            60% {                transform: translate(-3px, 4px) rotate(3.5deg);            }            62% {                transform: translate(4px, -4px) rotate(-2.5deg);            }            64% {                transform: translate(0px, 4px) rotate(3.5deg);            }            66% {                transform: translate(-5px, -4px) rotate(3.5deg);            }            68% {                transform: translate(6px, 1px) rotate(0.5deg);            }            70% {                transform: translate(-9px, -1px) rotate(1.5deg);            }            72% {                transform: translate(10px, -3px) rotate(0.5deg);            }            74% {                transform: translate(-4px, -9px) rotate(-1.5deg);            }            76% {                transform: translate(-8px, -9px) rotate(-2.5deg);            }            78% {                transform: translate(9px, 9px) rotate(1.5deg);            }            80% {                transform: translate(10px, 3px) rotate(1.5deg);            }            82% {                transform: translate(-9px, 2px) rotate(0.5deg);            }            84% {                transform: translate(-8px, 2px) rotate(2.5deg);            }            86% {                transform: translate(3px, 3px) rotate(3.5deg);            }            88% {                transform: translate(-8px, -8px) rotate(2.5deg);            }            90% {                transform: translate(10px, 2px) rotate(1.5deg);            }            92% {                transform: translate(7px, -8px) rotate(0.5deg);            }            94% {                transform: translate(10px, -5px) rotate(3.5deg);            }            96% {                transform: translate(-2px, 4px) rotate(-0.5deg);            }            98% {                transform: translate(7px, -9px) rotate(-0.5deg);            }        }        @keyframes shake-hard {            0% {                transform: translate(0px, 0px) rotate(0deg);            }            2% {                transform: translate(7px, -8px) rotate(-1.5deg);            }            4% {                transform: translate(-3px, 0px) rotate(1.5deg);            }            6% {                transform: translate(8px, -9px) rotate(-0.5deg);            }            8% {                transform: translate(-6px, 6px) rotate(-2.5deg);            }            10% {                transform: translate(4px, -8px) rotate(0.5deg);            }            12% {                transform: translate(10px, 5px) rotate(-0.5deg);            }            14% {                transform: translate(-7px, 7px) rotate(1.5deg);            }            16% {                transform: translate(6px, -3px) rotate(-0.5deg);            }            18% {                transform: translate(-5px, 8px) rotate(-1.5deg);            }            20% {                transform: translate(3px, 0px) rotate(2.5deg);            }            22% {                transform: translate(-2px, 4px) rotate(-2.5deg);            }            24% {                transform: translate(-3px, -3px) rotate(1.5deg);            }            26% {                transform: translate(-1px, -8px) rotate(-2.5deg);            }            28% {                transform: translate(0px, -6px) rotate(3.5deg);            }            30% {                transform: translate(-6px, -8px) rotate(1.5deg);            }            32% {                transform: translate(5px, -6px) rotate(3.5deg);            }            34% {                transform: translate(0px, -8px) rotate(2.5deg);            }            36% {                transform: translate(-5px, 9px) rotate(1.5deg);            }            38% {                transform: translate(9px, 5px) rotate(-1.5deg);            }            40% {                transform: translate(-2px, 8px) rotate(2.5deg);            }            42% {                transform: translate(-7px, 8px) rotate(-2.5deg);            }            44% {                transform: translate(6px, -8px) rotate(-1.5deg);            }            46% {                transform: translate(6px, 9px) rotate(-0.5deg);            }            48% {                transform: translate(-8px, -5px) rotate(0.5deg);            }            50% {                transform: translate(-9px, 10px) rotate(-0.5deg);            }            52% {                transform: translate(3px, 2px) rotate(2.5deg);            }            54% {                transform: translate(6px, -1px) rotate(3.5deg);            }            56% {                transform: translate(-7px, -6px) rotate(1.5deg);            }            58% {                transform: translate(-2px, 0px) rotate(-1.5deg);            }            60% {                transform: translate(-8px, 2px) rotate(1.5deg);            }            62% {                transform: translate(9px, -9px) rotate(-0.5deg);            }            64% {                transform: translate(-3px, -6px) rotate(-2.5deg);            }            66% {                transform: translate(3px, -9px) rotate(1.5deg);            }            68% {                transform: translate(6px, -2px) rotate(3.5deg);            }            70% {                transform: translate(-4px, -7px) rotate(-2.5deg);            }            72% {                transform: translate(10px, 1px) rotate(2.5deg);            }            74% {                transform: translate(-5px, -8px) rotate(0.5deg);            }            76% {                transform: translate(6px, -2px) rotate(3.5deg);            }            78% {                transform: translate(0px, 6px) rotate(0.5deg);            }            80% {                transform: translate(3px, 5px) rotate(2.5deg);            }            82% {                transform: translate(7px, 1px) rotate(0.5deg);            }            84% {                transform: translate(-2px, -2px) rotate(-2.5deg);            }            86% {                transform: translate(-4px, -2px) rotate(-0.5deg);            }            88% {                transform: translate(-3px, 7px) rotate(-1.5deg);            }            90% {                transform: translate(6px, 8px) rotate(1.5deg);            }            92% {                transform: translate(-6px, 5px) rotate(0.5deg);            }            94% {                transform: translate(-5px, 9px) rotate(3.5deg);            }            96% {                transform: translate(10px, -9px) rotate(3.5deg);            }            98% {                transform: translate(4px, -4px) rotate(-1.5deg);            }        }        @keyframes shake-horizontal {            0% {                transform: translate(0px, 0px) rotate(0deg);            }            2% {                transform: translate(8px, 0px) rotate(0deg);            }            4% {                transform: translate(9px, 0px) rotate(0deg);            }            6% {                transform: translate(5px, 0px) rotate(0deg);            }            8% {                transform: translate(-8px, 0px) rotate(0deg);            }            10% {                transform: translate(-8px, 0px) rotate(0deg);            }            12% {                transform: translate(6px, 0px) rotate(0deg);            }            14% {                transform: translate(8px, 0px) rotate(0deg);            }            16% {                transform: translate(3px, 0px) rotate(0deg);            }            18% {                transform: translate(6px, 0px) rotate(0deg);            }            20% {                transform: translate(1px, 0px) rotate(0deg);            }            22% {                transform: translate(6px, 0px) rotate(0deg);            }            24% {                transform: translate(-3px, 0px) rotate(0deg);            }            26% {                transform: translate(-4px, 0px) rotate(0deg);            }            28% {                transform: translate(-1px, 0px) rotate(0deg);            }            30% {                transform: translate(-4px, 0px) rotate(0deg);            }            32% {                transform: translate(6px, 0px) rotate(0deg);            }            34% {                transform: translate(6px, 0px) rotate(0deg);            }            36% {                transform: translate(4px, 0px) rotate(0deg);            }            38% {                transform: translate(0px, 0px) rotate(0deg);            }            40% {                transform: translate(-6px, 0px) rotate(0deg);            }            42% {                transform: translate(6px, 0px) rotate(0deg);            }            44% {                transform: translate(6px, 0px) rotate(0deg);            }            46% {                transform: translate(-7px, 0px) rotate(0deg);            }            48% {                transform: translate(9px, 0px) rotate(0deg);            }            50% {                transform: translate(0px, 0px) rotate(0deg);            }            52% {                transform: translate(10px, 0px) rotate(0deg);            }            54% {                transform: translate(3px, 0px) rotate(0deg);            }            56% {                transform: translate(-7px, 0px) rotate(0deg);            }            58% {                transform: translate(6px, 0px) rotate(0deg);            }            60% {                transform: translate(2px, 0px) rotate(0deg);            }            62% {                transform: translate(6px, 0px) rotate(0deg);            }            64% {                transform: translate(5px, 0px) rotate(0deg);            }            66% {                transform: translate(-3px, 0px) rotate(0deg);            }            68% {                transform: translate(1px, 0px) rotate(0deg);            }            70% {                transform: translate(-3px, 0px) rotate(0deg);            }            72% {                transform: translate(5px, 0px) rotate(0deg);            }            74% {                transform: translate(7px, 0px) rotate(0deg);            }            76% {                transform: translate(2px, 0px) rotate(0deg);            }            78% {                transform: translate(3px, 0px) rotate(0deg);            }            80% {                transform: translate(-6px, 0px) rotate(0deg);            }            82% {                transform: translate(5px, 0px) rotate(0deg);            }            84% {                transform: translate(-1px, 0px) rotate(0deg);            }            86% {                transform: translate(10px, 0px) rotate(0deg);            }            88% {                transform: translate(7px, 0px) rotate(0deg);            }            90% {                transform: translate(-7px, 0px) rotate(0deg);            }            92% {                transform: translate(8px, 0px) rotate(0deg);            }            94% {                transform: translate(-8px, 0px) rotate(0deg);            }            96% {                transform: translate(6px, 0px) rotate(0deg);            }            98% {                transform: translate(-6px, 0px) rotate(0deg);            }        }        @keyframes shake-vertical {            0% {                transform: translate(0px, 0px) rotate(0deg);            }            2% {                transform: translate(0px, 6px) rotate(0deg);            }            4% {                transform: translate(0px, 7px) rotate(0deg);            }            6% {                transform: translate(0px, 10px) rotate(0deg);            }            8% {                transform: translate(0px, -9px) rotate(0deg);            }            10% {                transform: translate(0px, 3px) rotate(0deg);            }            12% {                transform: translate(0px, -6px) rotate(0deg);            }            14% {                transform: translate(0px, 0px) rotate(0deg);            }            16% {                transform: translate(0px, -6px) rotate(0deg);            }            18% {                transform: translate(0px, -4px) rotate(0deg);            }            20% {                transform: translate(0px, 3px) rotate(0deg);            }            22% {                transform: translate(0px, 4px) rotate(0deg);            }            24% {                transform: translate(0px, 3px) rotate(0deg);            }            26% {                transform: translate(0px, 2px) rotate(0deg);            }            28% {                transform: translate(0px, 5px) rotate(0deg);            }            30% {                transform: translate(0px, 0px) rotate(0deg);            }            32% {                transform: translate(0px, -2px) rotate(0deg);            }            34% {                transform: translate(0px, -6px) rotate(0deg);            }            36% {                transform: translate(0px, -5px) rotate(0deg);            }            38% {                transform: translate(0px, -6px) rotate(0deg);            }            40% {                transform: translate(0px, -8px) rotate(0deg);            }            42% {                transform: translate(0px, -1px) rotate(0deg);            }            44% {                transform: translate(0px, -1px) rotate(0deg);            }            46% {                transform: translate(0px, 9px) rotate(0deg);            }            48% {                transform: translate(0px, 5px) rotate(0deg);            }            50% {                transform: translate(0px, -4px) rotate(0deg);            }            52% {                transform: translate(0px, -5px) rotate(0deg);            }            54% {                transform: translate(0px, -4px) rotate(0deg);            }            56% {                transform: translate(0px, -9px) rotate(0deg);            }            58% {                transform: translate(0px, -1px) rotate(0deg);            }            60% {                transform: translate(0px, 7px) rotate(0deg);            }            62% {                transform: translate(0px, -1px) rotate(0deg);            }            64% {                transform: translate(0px, -3px) rotate(0deg);            }            66% {                transform: translate(0px, -7px) rotate(0deg);            }            68% {                transform: translate(0px, -4px) rotate(0deg);            }            70% {                transform: translate(0px, 5px) rotate(0deg);            }            72% {                transform: translate(0px, 0px) rotate(0deg);            }            74% {                transform: translate(0px, 8px) rotate(0deg);            }            76% {                transform: translate(0px, -9px) rotate(0deg);            }            78% {                transform: translate(0px, 2px) rotate(0deg);            }            80% {                transform: translate(0px, -7px) rotate(0deg);            }            82% {                transform: translate(0px, 3px) rotate(0deg);            }            84% {                transform: translate(0px, 9px) rotate(0deg);            }            86% {                transform: translate(0px, -1px) rotate(0deg);            }            88% {                transform: translate(0px, 7px) rotate(0deg);            }            90% {                transform: translate(0px, 3px) rotate(0deg);            }            92% {                transform: translate(0px, -6px) rotate(0deg);            }            94% {                transform: translate(0px, -4px) rotate(0deg);            }            96% {                transform: translate(0px, 5px) rotate(0deg);            }            98% {                transform: translate(0px, -9px) rotate(0deg);            }        }        @keyframes shake-rotate {            0% {                transform: translate(0px, 0px) rotate(0deg);            }            2% {                transform: translate(0px, 0px) rotate(-1.5deg);            }            4% {                transform: translate(0px, 0px) rotate(4.5deg);            }            6% {                transform: translate(0px, 0px) rotate(7.5deg);            }            8% {                transform: translate(0px, 0px) rotate(-6.5deg);            }            10% {                transform: translate(0px, 0px) rotate(3.5deg);            }            12% {                transform: translate(0px, 0px) rotate(6.5deg);            }            14% {                transform: translate(0px, 0px) rotate(-2.5deg);            }            16% {                transform: translate(0px, 0px) rotate(-2.5deg);            }            18% {                transform: translate(0px, 0px) rotate(-1.5deg);            }            20% {                transform: translate(0px, 0px) rotate(5.5deg);            }            22% {                transform: translate(0px, 0px) rotate(-5.5deg);            }            24% {                transform: translate(0px, 0px) rotate(4.5deg);            }            26% {                transform: translate(0px, 0px) rotate(-0.5deg);            }            28% {                transform: translate(0px, 0px) rotate(6.5deg);            }            30% {                transform: translate(0px, 0px) rotate(-4.5deg);            }            32% {                transform: translate(0px, 0px) rotate(-3.5deg);            }            34% {                transform: translate(0px, 0px) rotate(-0.5deg);            }            36% {                transform: translate(0px, 0px) rotate(4.5deg);            }            38% {                transform: translate(0px, 0px) rotate(3.5deg);            }            40% {                transform: translate(0px, 0px) rotate(-3.5deg);            }            42% {                transform: translate(0px, 0px) rotate(7.5deg);            }            44% {                transform: translate(0px, 0px) rotate(-1.5deg);            }            46% {                transform: translate(0px, 0px) rotate(7.5deg);            }            48% {                transform: translate(0px, 0px) rotate(4.5deg);            }            50% {                transform: translate(0px, 0px) rotate(-3.5deg);            }            52% {                transform: translate(0px, 0px) rotate(7.5deg);            }            54% {                transform: translate(0px, 0px) rotate(4.5deg);            }            56% {                transform: translate(0px, 0px) rotate(5.5deg);            }            58% {                transform: translate(0px, 0px) rotate(-5.5deg);            }            60% {                transform: translate(0px, 0px) rotate(7.5deg);            }            62% {                transform: translate(0px, 0px) rotate(1.5deg);            }            64% {                transform: translate(0px, 0px) rotate(7.5deg);            }            66% {                transform: translate(0px, 0px) rotate(-4.5deg);            }            68% {                transform: translate(0px, 0px) rotate(3.5deg);            }            70% {                transform: translate(0px, 0px) rotate(4.5deg);            }            72% {                transform: translate(0px, 0px) rotate(-0.5deg);            }            74% {                transform: translate(0px, 0px) rotate(-3.5deg);            }            76% {                transform: translate(0px, 0px) rotate(3.5deg);            }            78% {                transform: translate(0px, 0px) rotate(7.5deg);            }            80% {                transform: translate(0px, 0px) rotate(2.5deg);            }            82% {                transform: translate(0px, 0px) rotate(0.5deg);            }            84% {                transform: translate(0px, 0px) rotate(-3.5deg);            }            86% {                transform: translate(0px, 0px) rotate(-0.5deg);            }            88% {                transform: translate(0px, 0px) rotate(0.5deg);            }            90% {                transform: translate(0px, 0px) rotate(2.5deg);            }            92% {                transform: translate(0px, 0px) rotate(-4.5deg);            }            94% {                transform: translate(0px, 0px) rotate(-0.5deg);            }            96% {                transform: translate(0px, 0px) rotate(-3.5deg);            }            98% {                transform: translate(0px, 0px) rotate(7.5deg);            }        }        @keyframes shake-opacity {            0% {                transform: translate(0px, 0px) rotate(0deg);                opacity: 0.8;            }            10% {                transform: translate(2px, -2px) rotate(1.5deg);                opacity: 0.2;            }            20% {                transform: translate(-2px, 2px) rotate(1.5deg);                opacity: 0.7;            }            30% {                transform: translate(0px, 3px) rotate(-0.5deg);                opacity: 0.7;            }            40% {                transform: translate(0px, -3px) rotate(2.5deg);                opacity: 1;            }            50% {                transform: translate(-3px, 3px) rotate(-1.5deg);                opacity: 0.3;            }            60% {                transform: translate(3px, -4px) rotate(1.5deg);                opacity: 0.6;            }            70% {                transform: translate(-1px, 1px) rotate(1.5deg);                opacity: 0.2;            }            80% {                transform: translate(0px, 4px) rotate(2.5deg);                opacity: 0.4;            }            90% {                transform: translate(3px, -4px) rotate(2.5deg);                opacity: 0.4;            }        }        @keyframes shake-crazy {            0% {                transform: translate(0px, 0px) rotate(0deg);                opacity: 0.6;            }            10% {                transform: translate(-15px, 15px) rotate(-5deg);                opacity: 0.2;            }            20% {                transform: translate(8px, 7px) rotate(-7deg);                opacity: 0.5;            }            30% {                transform: translate(0px, -11px) rotate(4deg);                opacity: 0.6;            }            40% {                transform: translate(3px, 3px) rotate(4deg);                opacity: 0.1;            }            50% {                transform: translate(-5px, -16px) rotate(-3deg);                opacity: 0.2;            }            60% {                transform: translate(14px, 6px) rotate(-7deg);                opacity: 0.8;            }            70% {                transform: translate(-4px, -11px) rotate(10deg);                opacity: 0.2;            }            80% {                transform: translate(11px, -3px) rotate(7deg);                opacity: 0.3;            }            90% {                transform: translate(3px, 2px) rotate(2deg);                opacity: 0.7;            }        }        /* apply a natural box layout model to all elements */        *, *:before, *:after {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;            box-sizing: border-box;        }        body {            background: #2ab8ac;        }        header {            width: 100%;            background-color: #ffab52;            text-align: center;            line-height: 1.5em;            font-family: 'Gentium Basic', serif;            padding: 5px 0;            font-size: .85em;            opacity: 0;            color: #fff68d;            visibility: hidden;            animation: op 15s forwards;        }        header a {            text-decoration: none;            color: rgba(0, 0, 0, 0.7);        }        header a:hover {            color: rgba(0, 0, 0, 0.94);        }        @keyframes op {            10%,90% {                opacity: 1;                visibility: visible;            }        }        .section {            color: white;            text-align: center;            height: 100%;            padding-top: 20px;        }        .section h1 {            font-family: 'Dancing Script', cursive;            font-size: 5em;        }        .section h4 {            font-size: 1.4em;            font-family: 'Gentium Basic', serif;        }        .section > p {            margin-top: 25px;            line-height: 1.5em;        }        .section a {            color: rgba(0, 0, 0, 0.5);        }        .section a:link {            text-decoration: none;        }        .section a:hover {            color: rgba(0, 0, 0, 0.85);        }        .section footer {            width: 100%;            line-height: 1.3em;            margin-top: 50px;            margin-bottom: 20px;        }        .arrow {            position: absolute;            bottom: 20px;            left: 50%;            margin-left: -10px;            width: 0;            height: 0;            border-left: 15px solid transparent;            border-right: 15px solid transparent;            border-top: 15px solid rgba(255, 255, 255, 0.3);            cursor: pointer;        }        .arrow:before {            content: '';            position: absolute;            top: -15px;            left: -8px;            width: 0;            height: 0;            border-left: 8px solid transparent;            border-right: 8px solid transparent;        }        .section.shamrock .arrow:before {            border-top: 10px solid #2ab8ac;        }        .section.carrot .arrow:before {            border-top: 10px solid #ffab52;        }        .section.amethyst .arrow:before {            border-top: 10px solid #9c55a5;        }        .section.scooter .arrow:before {            border-top: 10px solid #57cadd;        }        .section.dolly .arrow:before {            border-top: 10px solid #fff68d;        }        .section.shamrock .arrow:before {            border-top: 10px solid #2ab8ac;        }        .section.pear .arrow:before {            border-top: 10px solid #cce033;        }        .section.carrot {            background-color: #ffab52;        }        .section.amethyst {            background-color: #9c55a5;        }        .section.scooter {            background-color: #57cadd;        }        .section.dolly {            background-color: #fff68d;            color: #2C3E50;        }        .section.shamrock {            background-color: #2ab8ac;        }        .section.pear {            background-color: #cce033;        }        .color-carrot {            color: #ffab52;        }        .color-amethyst {            color: #9c55a5;        }        .color-scooter {            color: #57cadd;        }        .color-dolly {            color: #fff68d;        }        .color-shamrock {            color: #2ab8ac;        }        .color-pear {            color: #cce033;        }        .previews {            display: block;            list-style: none;            width: 85%;            margin: 34px auto 0;        }        .previews li {            display: inline-block;            width: 150px;            padding: 20px;            vertical-align: middle;        }        .previews.bigs li {            width: 250px;        }        .preview-item {            font-family: 'Dancing Script', cursive;            font-size: 70px;            line-height: 100px;            position: relative;            width: 100px;            height: 100px;            border-radius: 15px;            color: rgba(255, 255, 255, 0.3);            margin: auto;        }        .preview-item.big {            width: 200px;            height: 200px;            font-size: 160px;            line-height: 200px;        }        .section.carrot .preview-item {            background-color: #ffc485;        }        .section.amethyst .preview-item {            background-color: #b075b8;        }        .section.scooter .preview-item {            background-color: #81d7e6;        }        .section.dolly .preview-item {            background-color: #fffac0;        }        .section.shamrock .preview-item {            background-color: #41d4c7;        }        .section.pear .preview-item {            background-color: #d7e75f;        }        .preview-item:after {            content: "";            width: 0;            height: 0;            border-left: 33px solid transparent;            position: absolute;            bottom: 0px;            right: 0px;        }        .section.carrot .preview-item:after {            border-bottom: 33px solid #ffab52;        }        .section.amethyst .preview-item:after {            border-bottom: 33px solid #9c55a5;        }        .section.scooter .preview-item:after {            border-bottom: 33px solid #57cadd;        }        .section.dolly .preview-item:after {            border-bottom: 33px solid #fff68d;        }        .section.shamrock .preview-item:after {            border-bottom: 33px solid #2ab8ac;        }        .section.pear .preview-item:after {            border-bottom: 33px solid #cce033;        }        .flip {            position: absolute;            right: 0;            bottom: 0;            width: 0;            height: 0;            border-right: 30px solid transparent;        }        .section.carrot .flip {            border-top: 30px solid #ffd09f;        }        .section.amethyst .flip {            border-top: 30px solid #ba86c1;        }        .section.scooter .flip {            border-top: 30px solid #97deea;        }        .section.dolly .flip {            border-top: 30px solid #fffcda;        }        .section.shamrock .flip {            border-top: 30px solid #56d8cd;        }        .section.pear .flip {            border-top: 30px solid #ddea75;        }        .flip:after {            content: "";            width: 0;            height: 0;            border-bottom: 30px solid rgba(0, 0, 0, 0.15);            border-left: 30px solid transparent;            position: absolute;            bottom: 0;            left: -30px;        }        .preview-desc {            margin-top: 20px;            font-family: 'Gentium Basic', serif;        }        .dropdown {            position: relative;            margin: 25px auto;            height: 50px;            width: 300px;        }        .dropdown::after {            content: "➘";            position: absolute;            right: 11px;            top: 13px;            color: rgba(0, 0, 0, 0.2);            font-size: 25px;        }        .dropdown-select {            position: relative;            width: 100%;            margin: 0;            padding: 6px 8px 6px 10px;            height: 50px;            line-height: 25px;            font-family: 'Dancing Script', cursive;            font-size: 25px;            color: rgba(0, 0, 0, 0.5);            background-color: rgba(255, 255, 255, 0.1);            transition: background-color .3s;            border: none;            outline: none;            border: 0;            border-radius: 0;            -webkit-appearance: none;        }        .dropdown-select:hover, .dropdown-select:active {            background-color: rgba(255, 255, 255, 0.5);        }        .dropdown-select > option {            margin: 3px;            padding: 6px 8px;            text-shadow: none;            border-radius: 3px;            cursor: pointer;        }        .btn {            font-family: 'Dancing Script', cursive;            font-size: 40px;            padding: 10px 20px;            margin-top: 34px;            display: inline-block;            transition: background-color, .3s;        }        .btn.carrot {            background-color: #ffab52;        }        .btn.amethyst {            background-color: #9c55a5;        }        .btn.light:hover {            background-color: rgba(0, 0, 0, 0.1);        }        .btn + small {            font-family: 'Gentium Basic', serif;            font-size: 16px;            margin-top: 10px;            display: block;        }    </style></head><body><section >    <h1>颤抖吧<span >兄弟</span></h1>    <ul >        <li>            <i >                1                <span ></span>            </i>            <p >震动</p>        </li>        <li>            <i >                2                <span ></span>            </i>            <p >筛糠</p>        </li>        <li>            <i >                3                <span ></span>            </i>            <p >哆嗦</p>        </li>        <li>            <i >                4                <span ></span>            </i>            <p >颠簸</p>        </li>        <li>            <i >                &#8644;                <span ></span>            </i>            <p >筛箩</p>        </li>        <li>            <i >                &#8693;                <span ></span>            </i>            <p >按摩</p>        </li>        <li>            <i >                &#8635;                <span ></span>            </i>            <p >摇摆</p>        </li>        <li>            <i >                Os                <span ></span>            </i>            <p >闪烁</p>        </li>        <li>            <i >                ✌                <span ></span>            </i>            <p >地震</p>        </li>        <li>            <i >                &#8455;                <span ></span>            </i>            <p >歇菜</p>        </li>    </ul>    <footer>告诉你<span >&#9829;</span>不同的<a            >感觉</a></footer></section><audio  preload="auto">    <source src="http://elrumordelaluz.com/audio/harlemshake.ogg" type="audio/ogg">    <source src="http://elrumordelaluz.com/audio/harlemshake.mp3" type="audio/mpeg"></audio></body></html>

 

 

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台