div+css实现10种不同的鼠标悬浮抖动动画效果代码-html代码-BFW代码库

代码语言：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:infi.........完整代码请登录后点击上方下载按钮下载查看