div+css实现10种不同的鼠标悬浮抖动动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现10种不同的鼠标悬浮抖动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Gentium+Basic); @import url(https://fonts.googleapis.com/css?family=Dancing+Script); 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:0 } 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(-1.5px,0.5px) rotate(1.5deg) } 4% { transform:translate(1.5px,2.5px) rotate(1.5deg) } 6% { transform:translate(-0.5px,-0.5px) rotate(-0.5deg) } 8% { transform:translate(0.5px,0.5px) rotate(0.5deg) } 10% { transform:translate(-0.5px,1.5px) rotate(1.5deg) } 12% { transform:translate(-1.5px,-1.5px) rotate(1.5deg) } 14% { transform:translate(-0.5px,2.5px) rotate(0.5deg) } 16% { transform:translate(-1.5px,-1.5px) rotate(-0.5deg) } 18% { transform:translate(0.5px,1.5px) rotate(1.5deg) } 20% { transform:translate(0.5px,0.5px) rotate(-0.5deg) } 22% { transform:translate(0.5px,0.5px) rotate(1.5deg) } 24% { transform:translate(-1.5px,0.5px) rotate(0.5deg) } 26% { transform:translate(1.5px,-1.5px) rotate(0.5deg) } 28% { transform:translate(0.5px,1.5px) rotate(-0.5deg) } 30% { transform:translate(-1.5px,-1.5px) rotate(1.5deg) } 32% { transform:translate(1.5px,2.5px) rotate(-0.5deg) } 34% { transform:translate(2.5px,1.5px) rotate(-0.5deg) } 36% { transform:translate(0.5px,-1.5px) rotate(1.5deg) } 38% { transform:translate(0.5px,-1.5px) rotate(0.5deg) } 40% { transform:translate(2.5px,2.5px) rotate(1.5deg) } 42% { transform:translate(2.5px,0.5px) rotate(1.5deg) } 44% { transform:translate(0.5px,2.5px) rotate(1.5deg) } 46% { transform:translate(-1.5px,-0.5px) rotate(1.5deg) } 48% { transform:translate(2.5px,1.5px) rotate(1.5deg) } 50% { transform:translate(1.5px,-0.5px) rotate(0.5deg) } 52% { transform:translate(-1.5px,0.5px) rotate(0.5deg) } 54% { transform:translate(-1.5px,-0.5px) rotate(0.5deg) } 56% { transform:translate(-0.5px,2.5px) rotate(-0.5deg) } 58% { transform:translate(-1.5px,1.5px) rotate(1.5deg) } 60% { transform:translate(0.5px,1.5px) rotate(-0.5deg) } 62% { transform:translate(-0.5px,-0.5px) rotate(-0.5deg) } 64% { transform:translate(1.5px,-1.5px) rotate(-0.5deg) } 66% { transform:translate(-1.5px,-0.5px) rotate(1.5deg) } 68% { transform:translate(0.5px,0.5px) rotate(-0.5deg) } 70% { transform:translate(0.5px,1.5px) rotate(-0.5deg) } 72% { transform:translate(0.5px,1.5px) rotate(0.5deg) } 74% { transform:translate(0.5px,1.5px) rotate(-0.5deg) } 76% { transform:translate(1.5px,0.5px) rotate(0.5deg) } 78% { transform:translate(1.5px,0.5px) rotate(0.5deg) } 80% { transform:translate(-1.5px,2.5px) rotate(-0.5deg) } 82% { transform:translate(0.5px,-0.5px) rotate(0.5deg) } 84% { transform:translate(0.5px,2.5px) rotate(0.5deg) } 86% { transform:translate(-1.5px,-1.5px) rotate(-0.5deg) } 88% { transform:translate(2.5px,-1.5px) rotate(0.5deg) } 90% { transform:translate(-1.5px,-1.5px) rotate(1.5deg) } 92% { transform:translate(1.5px,-0.5px) rotate(0.5deg) } 94% { transform:translate(-0.5px,2.5px) rotate(0.5deg) } 96% { transform:translate(0.5px,0.5px) rotate(0.5deg) } 98% { transform:translate(-0.5px,-1.5px) rotate(-0.5deg) } }@keyframes shake-little { 0% { transform:translate(0px,0px) rotate(0deg) } 2% { transform:translate(0px,1px) rotate(0.5deg) } 4% { transform:translate(0px,1px) rotate(0.5deg) } 6% { transform:translate(1px,0px) rotate(0.5deg) } 8% { transform:translate(1px,0px) rotate(0.5deg) } 10% { transform:translate(0px,0px) rotate(0.5deg) } 12% { transform:translate(0px,0px) rotate(0.5deg) } 14% { transform:translate(0px,0px) rotate(0.5deg) } 16% { transform:translate(1px,1px) rotate(0.5deg) } 18% { transform:translate(1px,1px) rotate(0.5deg) } 20% { transform:translate(1px,1px) rotate(0.5deg) } 22% { transform:translate(1px,0px) rotate(0.5deg) } 24% { transform:translate(0px,0px) rotate(0.5deg) } 26% { transform:translate(1px,0px) rotate(0.5deg) } 28% { transform:translate(1px,1px) rotate(0.5deg) } 30% { transform:translate(1px,0px) rotate(0.5deg) } 32% { transform:translate(1px,0px) rotate(0.5deg) } 34% { transform:translate(1px,0px) rotate(0.5deg) } 36% { transform:translate(1px,0px) rotate(0.5deg) } 38% { transform:translate(0px,1px) rotate(0.5deg) } 40% { transform:translate(0px,1px) rotate(0.5deg) } 42% { transform:translate(1px,1px) rotate(0.5deg) } 44% { transform:translate(0px,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(0px,1px) rotate(0.5deg) } 54% { transform:translate(0px,0px) rotate(0.5deg) } 56% { transform:translate(1px,1px) rotate(0.5deg) } 58% { transform:translate(1px,0px) rotate(0.5deg) } 60% { transform:translate(0px,0px) rotate(0.5deg) } 62% { transform:translate(1px,0px) rotate(0.5deg) } 64% { transform:translate(0px,0px) rotate(0.5deg) } 66% { transform:translate(0px,1px) rotate(0.5deg) } 68% { transform:translate(0px,0px) rotate(0.5deg) } 70% { transform:translate(0px,0px) rotate(0.5deg) } 72% { transform:translate(0px,1px) rotate(0.5deg) } 74% { transform:translate(0px,1px) rotate(0.5deg) } 76% { transform:translate(1px,1px) rotate(0.5deg) } 78% { transform:translate(0px,1px) rotate(0.5deg) } 80% { transform:translate(0px,0px) rotate(0.5deg) } 82% { transform:translate(0px,0px) rotate(0.5deg) } 84% { transform:translate(1px,1px) rotate(0.5deg) } 86% { transform:translate(0px,0px) rotate(0.5deg) } 88% { transform:translate(1px,1px) rotate(0.5deg) } 90% { transform:translate(0px,0px) rotate(0.5deg) } 92% { transform:translate(0px,0px) rotate(0.5deg) } 94% { transform:translate(0px,1px) rotate(0.5deg) } 96% { transform:translate(0px,1px) rotate(0.5deg) } 98% { transform:translate(1px,0px) rotate(0.5deg) } }@keyframes shake-slow { 0% { transform:translate(0px,0px) rotate(0deg) } 2% { transform:translate(-8px,5px) rotate(0.5deg) } 4% { transform:translate(0px,-2px) rotate(-1.5deg) } 6% { transform:translate(-7px,-6px) rotate(1.5deg) } 8% { transform:translate(-7px,2px) rotate(2.5deg) } 10% { transform:translate(6px,-9px) rotate(0.5deg) } 12% { transform:translate(6px,10px) rotate(-1.5deg) } 14% { transform:translate(7px,-8px) rotate(3.5deg) } 16% { transform:translate(3px,8px) rotate(-1.5deg) } 18% { transform:translate(-6px,1px) rotate(-0.5deg) } 20% { transform:translate(-8px,-7px) rotate(1.5deg) } 22% { transform:translate(-2px,-5px) rotate(-1.5deg) } 24% { transform:translate(7px,6px) rotate(2.5deg) } 26% { transform:translate(-1px,9px) rotate(1.5deg) } 28% { transform:translate(-5px,3px) rotate(2.5deg) } 30% { transform:translate(6px,0px) rotate(2.5deg) } 32% { transform:translate(1px,-4px) rotate(-0.5deg) } 34% { transform:translate(8px,2px) rotate(2.5deg) } 36% { transform:translate(-2px,0px) rotate(0.5deg) } 38% { transform:translate(7px,1px) rotate(3.5deg) } 40% { transform:translate(6px,-7px) rotate(-0.5deg) } 42% { transform:translate(-4px,-7px) rotate(2.5deg) } 44% { transform:translate(7px,8px) rotate(2.5deg) } 46% { transform:translate(-4px,-4px) rotate(-1.5deg) } 48% { transform:translate(3px,-3px) rotate(1.5deg) } 50% { transform:translate(2px,-3px) rotate(-2.5deg) } 52% { transform:translate(3px,-9px) rotate(-1.5deg) } 54% { transform:translate(4px,7px) rotate(1.5deg) } 56% { transform:translate(9px,-3px) rotate(-2.5deg) } 58% { transform:translate(2px,0px) rotate(-0.5deg) } 60% { transform:translate(1px,-9px) rotate(-0.5deg) } 62% { transform:translate(0px,8px) rotate(0.5deg) } 64% { transform:translate(1px,4px) rotate(2.5deg) } 66% { transform:translate(0px,-7px) rotate(1.5deg) } 68% { transform:translate(3px,-7px) rotate(0.5deg) } 70% { transform:translate(-8px,-8px) rotate(3.5deg) } 72% { transform:translate(1px,3px) rotate(0.5deg) } 74% { transform:translate(6px,3px) rotate(1.5deg) } 76% { transform:translate(6px,-9px) rotate(-1.5deg) } 78% { transform:translate(-9px,10px) rotate(1.5deg) } 80% { transform:translate(4px,4px) rotate(1.5deg) } 82% { transform:translate(1px,7px) rotate(2.5deg) } 84% { transform:translate(2px,6px) rotate(1.5deg) } 86% { transform:translate(-5px,8px) rotate(-2.5deg) } 88% { transform:translate(2px,8px) rotate(-2.5deg) } 90% { transform:translate(4px,6px) rotate(3.5deg) } 92% { transform:translate(3px,0px) rotate(-0.5deg) } 94% { transform:translate(-5px,8px) rotate(-0.5deg) } 96% { transform:translate(10px,2px) rotate(-2.5deg) } 98% { transform:translate(-9px,6px) rotate(-1.5deg) } }@keyframes shake-hard { 0% { transform:translate(0px,0px) rotate(0deg) } 2% { transform:translate(1px,7px) rotate(-0.5deg) } 4% { transform:translate(-6px,1px) rotate(-0.5deg) } 6% { transform:translate(-2px,2px) rotate(0.5deg) } 8% { transform:translate(-6px,2px) rotate(3.5deg) } 10% { transform:translate(2px,7px) rotate(1.5deg) } 12% { transform:translate(8px,-2px) rotate(-1.5deg) } 14% { transform:translate(-3px,1px) rotate(-1.5deg) } 16% { transform:translate(-2px,-9px) rotate(0.5deg) } 18% { transform:translate(-7px,-1px) rotate(0.5deg) } 20% { transform:translate(-5px,8px) rotate(-2.5deg) } 22% { transform:translate(10px,3px) rotate(3.5deg) } 24% { transform:translate(4px,0px) rotate(-1.5deg) } 26% { transform:translate(-9px,-7px) rotate(2.5deg) } 28% { transform:translate(6px,7px) rotate(1.5deg) } 30% { transform:translate(-6px,6px) rotate(1.5deg) } 32% { transform:translate(1px,-6px) rotate(2.5deg) } 34% { transform:translate(0px,0px) rotate(-0.5deg) } 36% { transform:translate(5px,-8px) rotate(-0.5deg) } 38% { transform:translate(7px,3px) rotate(1.5deg) } 40% { transform:translate(-7px,2px) rotate(1.5deg) } 42% { transform:translate(0px,2px) rotate(2.5deg) } 44% { transform:translate(7px,5px) rotate(1.5deg) } 46% { transform:translate(-2px,5px) rotate(2.5deg) } 48% { transform:translate(5px,5px) rotate(0.5deg) } 50% { transform:translate(4px,5px) rotate(3.5deg) } 52% { transform:translate(8px,10px) rotate(2.5deg) } 54% { transform:translate(-4px,-8px) rotate(2.5deg) } 56% { transform:translate(1px,5px) rotate(3.5deg) } 58% { transform:translate(6px,9px) rotate(-1.5deg) } 60% { transform:translate(-6px,3px) rotate(1.5deg) } 62% { transform:translate(10px,1px) rotate(1.5deg) } 64% { transform:translate(-9px,9px) rotate(-2.5deg) } 66% { transform:translate(5px,-5px) rotate(2.5deg) } 68% { transform:translate(4px,5px) rotate(2.5deg) } 70% { transform:translate(8px,-1px) rotate(-0.5deg) } 72% { transform:translate(-5px,8px) rotate(2.5deg) } 74% { transform:translate(2px,-2px) rotate(3.5deg) } 76% { transform:translate(-7px,-5px) rotate(2.5deg) } 78% { transform:translate(-5px,4px) rotate(1.5deg) } 80% { transform:translate(-5px,-5px) rotate(-1.5deg) } 82% { transform:translate(-2px,0px) rotate(2.5deg) } 84% { transform:translate(8px,-7px) rotate(-1.5deg) } 86% { transform:translate(-8px,-9px) rotate(-1.5deg) } 88% { transform:translate(1px,8px) rotate(-1.5deg) } 90% { transform:translate(5px,0px) rotate(1.5deg) } 92% { transform:translate(-5px,7px) rotate(-2.5deg) } 94% { transform:translate(0px,10px) rotate(2.5deg) } 96% { transform:translate(6px,4px) rotate(0.5deg) } 98% { transform:translate(7px,2px) rotate(3.5deg) } }@keyframes shake-horizontal { 0% { transform:translate(0px,0px) rotate(0deg) } 2% { transform:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0