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 class="section shamrock"> <h1>颤抖吧<span class="shake shake-delay">兄弟</span></h1> <ul class="previews"> <li> <i class="preview-item shake"> 1 <span class="flip"></span> </i> <p class="preview-desc">震动</p> </li> <li> <i class="preview-item shake shake-slow"> 2 <span class="flip"></span> </i> <p class="preview-desc">筛糠</p> </li> <li> <i class="preview-item shake shake-little"> 3 <span class="flip"></span> </i> <p class="preview-desc">哆嗦</p> </li> <li> <i class="preview-item shake shake-hard"> 4 <span class="flip"></span> </i> <p class="preview-desc">颠簸</p> </li> <li> <i class="preview-item shake shake-horizontal"> ⇄ <span class="flip"></span> </i> <p class="preview-desc">筛箩</p> </li> <li> <i class="preview-item shake shake-vertical"> ⇵ <span class="flip"></span> </i> <p class="preview-desc">按摩</p> </li> <li> <i class="preview-item shake shake-rotate"> ↻ <span class="flip"></span> </i> <p class="preview-desc">摇摆</p> </li> <li> <i class="preview-item shake shake-opacity"> Os <span class="flip"></span> </i> <p class="preview-desc">闪烁</p> </li> <li> <i class="preview-item shake shake-crazy"> ✌ <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> <footer>告诉你<span class="shake shake-slow shake-constant">♥</span>不同的<a class="shake shake-constant hover-stop">感觉</a></footer> </section> <audio id="track" 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>
.
相关推荐
在实现元素颤抖特效时,jQuery的动画功能尤其重要。通过$.fn.extend或$.fn方法,我们可以扩展jQuery对象,创建自定义动画效果。例如,可以使用`.animate()`函数,结合CSS3的transform属性,来控制元素的位置和尺寸...
"jquery+css3实现元素颤抖特效"是一个结合了jQuery JavaScript库和CSS3技术来创建动态效果的实例。这个压缩包包含了一个实现元素颤抖效果的完整解决方案。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM...
"jQuery+CSS3实现元素颤抖特效"是一种常见的动态效果,它利用这两种技术的强大功能,创造出各种有趣的视觉反馈。在这个主题中,我们将深入探讨如何通过jQuery库和CSS3的属性来创建元素的颤抖效果。 首先,jQuery是...
具体实现时,JavaScript代码可能在`mouseover`事件中修改图片的CSS类或属性,触发CSS动画;`click`事件则可以加载大图或者打开新的视窗。同时,CSS文件会定义动画的具体效果,如持续时间、延迟、动画曲线等。这个...
jQuery的动画功能是实现特效的核心。`animate()`函数允许我们自定义元素的CSS属性变化,如位置、大小、透明度等,实现平滑过渡。例如,`$("#elem").animate({left:'+=50'}, 1000)`会将ID为`elem`的元素向右移动50...
接下来,我们使用JavaScript(通常结合jQuery库,因为它的API简洁且功能强大)来实现图片抖动效果。如果你不熟悉jQuery,也可以使用原生的JavaScript,但代码会相对复杂一些。这里我们假设已经引入了jQuery库: ```...
标题 "20款jquery网页颤抖摇摆特效特效代码" 暗示了这个压缩包包含的是二十种不同的jQuery实现的网页动画效果,特别是那些模仿物体颤抖或摇摆的行为。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...
同时,我们将学习CSS-like的BoxModel和Material Design风格的定制。 5. **动画与过渡效果**:Flutter的动画系统强大且灵活,可以创建复杂的过渡和动画效果。我们还将学习如何使用AnimatedBuilder、Tween和Animation...
6. ActionScript编程:虽然Flex主要基于MXML进行声明式编程,但很多高级功能,如动画和复杂逻辑,通常需要使用ActionScript来实现。ActionScript是基于ECMAScript的面向对象语言,理解和掌握其语法至关重要。 7. ...
总的来说,这个【易买网静态项目模板】是一个理想的实践平台,它将帮助初学者理解Web项目的整体架构,掌握前后端交互的实现方式,以及如何利用JSP、JDBC和JSON进行数据处理和通信。通过这个模板,学习者可以逐步提升...
在Openfire中,插件是扩展其功能的主要方式,开发者可以通过编写插件来实现特定的需求。在这个“Openfire插件开发 访问jsp servlet”项目中,我们将探讨如何在Openfire环境中开发一个插件,同时利用JavaServer Pages...
WebView是一种可以在移动应用中嵌入网页内容的组件,可以加载HTML、CSS和JavaScript,从而实现原生应用与网络内容的结合。 4. **社区驱动**:Underc0de-app强调了社区的重要性,意味着该项目不仅是一个产品,也是一...
这可以通过在`plugins`参数中添加`lineheight`来实现。例如: ```javascript tinymce.init({ selector: 'textarea', // 选择器,确定TinyMCE要应用的元素 plugins: 'lineheight', // 引入line-height插件 ...
在描述中提到的 "颤抖旅行UI",可能是指该 UI 设计具有动感和现代感,就像“颤抖”一样吸引用户注意力,提供流畅的交互体验。这种设计通常会包含地图、目的地列表、旅行日程、预订选项等常见旅行应用功能的界面元素...
15. **come true (实现,成真)** - **解释**:这个短语可以用来描述一个想法或计划的成功实施。 - **应用实例**:“通过不懈的努力,我们终于让这个创新的想法成为了现实(come true)。” 16. **that is up to sb....