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

代码语言:html

所属分类:悬停

代码描述:div+css实现10种不同的鼠标悬浮抖动动画效果代码

代码标签: div css 鼠标 悬浮 抖动 动画

下面为部分代码预览,完整代码请点击下载或在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