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)
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0