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