下载Demo

效果预览

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标悬停css3动画效果</title>

    <link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" />

    <style>

      .main a:not(:hover):not(:target) {-webkit-animation: 0s ease 0s normal none  none;}

       .main a:not(:hover):not(:target) {-moz-animation: 0s ease 0s normal none  none;}

      .main a:not(:hover):not(:target) {animation: 0s ease 0s normal none  none !important;}

    </style>

</head>

<body>

<div class="box">

  <div class="main">

    <a id="border-radius"></a>

    <a id="border-radius-2"></a>

    <a id="border-width"></a>

    <a id="border-width-2"></a>

    <a id="border-width-3"></a>

    <a id="background-color"></a>

    <a id="background-position"></a>

    <a id="background-position-2"></a>

    <a id="background-size"></a>

    <a id="text-shadow"></a>

    <a id="text-shadow-2"></a>

    <a id="text-shadow-3"></a>

    <a id="box-shadow"></a>

    <a id="box-shadow-2"></a>

    <a id="font-size"></a>

    <a id="font-size-2"></a>

    <a id="letter-spacing"></a>

    <a id="text-indent"></a>

    <a id="height"></a>

    <a id="line-height"></a>

    <a id="transform"></a>

    <a id="transform-2"></a>

    <a id="transform-3"></a>

    <a id="transform-4"></a>

    <a id="transform-5"></a>

    <a id="transform-6"></a>

    <a id="transform-7"></a>

    <a id="transform-8"></a>

    <a id="transform-9"></a>

    <a id="transform-10"></a>

    <a id="transform-origin"></a>

    <a id=""></a>

  </div>

</div>

</body>

</html>

CSS:

body, h1, p, ul, li {padding:; margin:;}

ul, li {list-style:none;}

body {font-family:Futura,'Century Gothic',sans-serif; background:url(../images/bg.jpg) repeat;}

a {color:#; text-decoration:none;}

.box {width:%; margin:50px ; text-align:center;}

.box h1 {text-align:center; font-size:%; line-height:; margin-bottom:20px;}

.box h1 p {font-size:26px; color:#c6c6c6; display:block;}

.box h1 p a {color:#c6c6c6;}

.hover-all {margin-top:20px;}

#hover, #all {font-size:12px; background-color:#; padding:5px 10px; margin:10px; color:#FFF; border-radius:2px;}

#hover:hover, #all:hover {background-color:#;}

.main {width:%; margin:10px auto; counter-reset:demo;}

.main:after {content:""; clear:both; display:block;}

.main a {width:175px; height:175px; line-height:175px; float:left; margin:18px; background:#bfbfbf; cursor:pointer; font-size:80px; color:#FFF; display:block; counter-increment:demo; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center;}

.main a:before {content:counter(demo, decimal);}

.main a:after {content:attr(id); position:absolute; color:#; font-size:14px; right:; left:; bottom:-20px; line-height:; text-shadow:none; letter-spacing:;}

.info {margin-top:30px; font-size:12px;}

/** 1 **/

#border-radius {-webkit-animation:border-radius 1s ease 0s alternate none infinite;}

#border-radius {-moz-animation:border-radius 1s ease 0s alternate none infinite;}

#border-radius {animation:border-radius 1s ease 0s alternate none infinite;}

@-webkit-keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }

@-moz-keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }

@keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }

/** 2 **/

#border-radius- {-webkit-animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}

#border-radius- {-moz-animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}

#border-radius- {animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}

@-webkit-keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }

@-moz-keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }

@keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }

/** 3 **/

#border-width {-webkit-animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}

#border-width {-moz-animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}

#border-width {animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}

@-webkit-keyframes border-width { from{border-width:; } to{ border-width:80px;} }

@-moz-keyframes border-width { from{border-width:; } to{ border-width:80px;} }

@keyframes border-width { from{border-width:; } to{ border-width:80px;} }

/** 4 **/

#border-width- {-webkit-animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}

#border-width- {-moz-animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}

#border-width- {animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}

@-webkit-keyframes border-width- { from{border-width:; } to{ border-width:60px;} }

@-moz-keyframes border-width- { from{border-width:; } to{ border-width:60px;} }

@keyframes border-width- { from{border-width:; } to{ border-width:60px;} }

/** 5 **/

#border-width- {-webkit-animation:border-width- 1s ease 0s alternate none infinite; border: double #;}

#border-width- {-moz-animation:border-width- 1s ease 0s alternate none infinite; border: double #;}

#border-width- {animation:border-width- 1s ease 0s alternate none infinite; border: double #;}

@-webkit-keyframes border-width- { from{border-width:; } to{ border-width:80px;} }

@-moz-keyframes border-width- { from{border-width:; } to{ border-width:80px;} }

@keyframes border-width- { from{border-width:; } to{ border-width:80px;} }

/** 6 **/

#background-color {-webkit-animation:background-color 1s ease 0s alternate none infinite;}

#background-color {-moz-animation:background-color 1s ease 0s alternate none infinite;}

#background-color {animation:background-color 1s ease 0s alternate none infinite;}

@-webkit-keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }

@-moz-keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }

@keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }

/** 7 **/

#background-position {-webkit-animation:background-position 1s ease 0s alternate none infinite; background-image:-webkit-linear-gradient(135deg, transparent %, black %, black %, transparent %, transparent %, black %, black); background-size:60px 60px;}

#background-position {-moz-animation:background-position 1s ease 0s alternate none infinite; background-image:-moz-linear-gradient(-45deg, transparent %, black %, black %, transparent %, transparent %, black %, black); background-size:60px 60px;}

#background-position {animation:background-position 1s ease 0s alternate none infinite; background-image:linear-gradient(-45deg, transparent %, black %, black %, transparent %, transparent %, black %, black); background-size:60px 60px;}

@-webkit-keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }

@-moz-keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }

@keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }

/** 8 **/

#background-position- {-webkit-animation:background-position- 1s ease 0s alternate none infinite; background-color:#E04332; background-image:-webkit-linear-gradient(135deg, slateGray %, transparent %), -webkit-linear-gradient(45deg, transparent %, slateGray %), -webkit-linear-gradient(45deg, slateGray %, transparent %), -webkit-linear-gradient(135deg, transparent %, slateGray %); background-size:30px 370px; background-repeat:repeat-x; background-position:10px , 10px , 20px -190px, 20px -190px;}

#background-position- {-moz-animation:background-position- 1s ease 0s alternate none infinite; background-color:#E04332; background-image:-moz-linear-gradient(-45deg, slategray %, transparent %), linear-gradient(45deg, transparent %, slategray %), linear-gradient(45deg, slategray %, transparent %), linear-gradient(-45deg, transparent %, slategray %); background-size:30px 370px; background-repeat:repeat-x; background-position:10px , 10px , 20px -190px, 20px -190px;}

#background-position- {animation:background-position- 1s ease 0s alternate none infinite; background-color:#E04332; background-image:linear-gradient(-45deg, slategray %, transparent %), linear-gradient(45deg, transparent %, slategray %), linear-gradient(45deg, slategray %, transparent %), linear-gradient(-45deg, transparent %, slategray %); background-size:30px 370px; background-repeat:repeat-x; background-position:10px , 10px , 20px -190px, 20px -190px;}

@-webkit-keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }

@-moz-keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }

@keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }

/** 9 **/

#background-size {-webkit-animation:background-size 1s ease 0s alternate none infinite; background-image:-webkit-repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-size:5px 5px; background-position:center center;}

#background-size {-moz-animation:background-size 1s ease 0s alternate none infinite; background-image:-moz-repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-size:5px 5px; background-position:center center;}

#background-size {animation:background-size 1s ease 0s alternate none infinite; background-image:repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-size:5px 5px; background-position:center center;}

@-webkit-keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }

@-moz-keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }

@keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }

/** 10 **/

#text-shadow{-webkit-animation:text-shadow 1s ease 0s alternate none infinite;}

#text-shadow{-moz-animation:text-shadow 1s ease 0s alternate none infinite;}

#text-shadow{animation:text-shadow 1s ease 0s alternate none infinite;}

@-webkit-keyframes text-shadow { from{text-shadow:  #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }

@-moz-keyframes text-shadow { from{text-shadow:  #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }

@keyframes text-shadow { from{text-shadow:  #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }

/** 11 **/

#text-shadow- {-webkit-animation:text-shadow- 1s ease 0s alternate none infinite;}

#text-shadow- {-moz-animation:text-shadow- 1s ease 0s alternate none infinite;}

#text-shadow- {animation:text-shadow- 1s ease 0s alternate none infinite;}

@-webkit-keyframes text-shadow- { from{text-shadow:   #; } to{text-shadow:  20px #FFF; } }

@-moz-keyframes text-shadow- { from{text-shadow:   #; } to{text-shadow:  20px #FFF; } }

@keyframes text-shadow- { from{text-shadow:   #; } to{text-shadow:  20px #FFF; } }

/** 12 **/

#text-shadow- {-webkit-animation:text-shadow- 1s ease 0s alternate none infinite;}

#text-shadow- {-moz-animation:text-shadow- 1s ease 0s alternate none infinite;}

#text-shadow- {animation:text-shadow- 1s ease 0s alternate none infinite;}

@-webkit-keyframes text-shadow- { from{text-shadow:  white; } to{text-shadow:  rgba(,,,), -45px -45px  red, -30px -30px  orange, -15px -15px  yellow,    green, 15px 15px  blue, 30px 30px  indigo, 45px 45px  violet; } }

@-moz-keyframes text-shadow- { from{text-shadow:  white; } to{text-shadow:  rgba(,,,), -45px -45px  red, -30px -30px  orange, -15px -15px  yellow,    green, 15px 15px  blue, 30px 30px  indigo, 45px 45px  violet; } }

@keyframes text-shadow- { from{text-shadow:  white; } to{text-shadow:  rgba(,,,), -45px -45px  red, -30px -30px  orange, -15px -15px  yellow,    green, 15px 15px  blue, 30px 30px  indigo, 45px 45px  violet; } }

/** 13 **/

#box-shadow {-webkit-animation:box-shadow 1s ease 0s alternate none infinite; -webkit-box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF;}

#box-shadow {-moz-animation:box-shadow 1s ease 0s alternate none infinite; -moz-box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF;}

#box-shadow {animation:box-shadow 1s ease 0s alternate none infinite; box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF;}

@-webkit-keyframes box-shadow { from{box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF; } to{box-shadow:inset   35px 50px #ccc,   75px 50px #ccc; } }

@-moz-keyframes box-shadow { from{box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF; } to{box-shadow:inset   35px 50px #ccc,   75px 50px #ccc; } }

@keyframes box-shadow { from{box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF; } to{box-shadow:inset   35px 50px #ccc,   75px 50px #ccc; } }

/** 14 **/

#box-shadow-{-webkit-animation:box-shadow- 1s ease 0s alternate none infinite;}

#box-shadow-{-moz-animation:box-shadow- 1s ease 0s alternate none infinite;}

#box-shadow-{animation:box-shadow- 1s ease 0s alternate none infinite;}

@-webkit-keyframes box-shadow- { from{box-shadow:  #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }

@-moz-keyframes box-shadow- { from{box-shadow:  #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }

@keyframes box-shadow- { from{box-shadow:  #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }

/** 15 **/

#font-size {-webkit-animation:font-size 1s ease 0s alternate none infinite;}

#font-size {-moz-animation:font-size 1s ease 0s alternate none infinite;}

#font-size {animation:font-size 1s ease 0s alternate none infinite;}

@-webkit-keyframes font-size { from{font-size:80px; } to{font-size:10px; } }

@-moz-keyframes font-size { from{font-size:80px; } to{font-size:10px; } }

@keyframes font-size { from{font-size:80px; } to{font-size:10px; } }

/** 16 **/

#font-size- {-webkit-animation:font-size- 1s ease 0s alternate none infinite;}

#font-size- {-moz-animation:font-size- 1s ease 0s alternate none infinite;}

#font-size- {animation:font-size- 1s ease 0s alternate none infinite;}

@-webkit-keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }

@-moz-keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }

@keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }

/** 17 **/

#letter-spacing {-webkit-animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}

#letter-spacing {-moz-animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}

#letter-spacing {animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}

@-webkit-keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }

@-moz-keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }

@keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }

/** 18 **/

#text-indent {-webkit-animation:text-indent 1s ease 0s alternate none infinite;}

#text-indent {-moz-animation:text-indent 1s ease 0s alternate none infinite;}

#text-indent {animation:text-indent 1s ease 0s alternate none infinite;}

@-webkit-keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }

@-moz-keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }

@keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }

/** 19 **/

#height {-webkit-animation:height 1s ease 0s alternate none infinite;}

#height {-moz-animation:height 1s ease 0s alternate none infinite;}

#height {animation:height 1s ease 0s alternate none infinite;}

@-webkit-keyframes height { from{height:175px; } to{height:10px; } }

@-moz-keyframes height { from{height:175px; } to{height:10px; } }

@keyframes height { from{height:175px; } to{height:10px; } }

/** 20 **/

#line-height {-webkit-animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}

#line-height {-moz-animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}

#line-height {animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}

@-webkit-keyframes line-height { from{line-height:60px; } to{line-height:350px; } }

@-moz-keyframes line-height { from{line-height:60px; } to{line-height:350px; } }

@keyframes line-height { from{line-height:60px; } to{line-height:350px; } }

/** 21 **/

#transform {-webkit-animation:transform 1s ease 0s alternate none infinite;}

#transform {-moz-animation:transform 1s ease 0s alternate none infinite;}

#transform {animation:transform 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform { from{-webkit-transform:rotate(0deg); } to{-webkit-transform:rotate(360deg); } }

@-moz-keyframes transform { from{-moz-transform:rotate(0deg); } to{-moz-transform:rotate(360deg); } }

@keyframes transform { from{transform:rotate(0deg); } to{transform:rotate(360deg); } }

/** 22 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {animation:transform- 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:scale(); } to{-webkit-transform:scale(); } }

@-moz-keyframes transform- { from{-moz-transform:scale(); } to{-moz-transform:scale(); } }

@keyframes transform- { from{transform:scale(); } to{transform:scale(); } }

/** 23 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {animation:transform- 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:skewX(0deg); } %{-webkit-transform:skewX(30deg); } %{-webkit-transform:skewX(0deg); } %{-webkit-transform:skewX(-30deg); } to{-webkit-transform:skewX(0deg); } }

@-moz-keyframes transform- { from{-moz-transform:skewX(0deg); } %{-moz-transform:skewX(30deg); } %{-moz-transform:skewX(0deg); } %{-moz-transform:skewX(-30deg); } to{-moz-transform:skewX(0deg); } }

@keyframes transform- { from{transform:skewX(0deg); } %{transform:skewX(30deg); } %{transform:skewX(0deg); } %{transform:skewX(-30deg); } to{transform:skewX(0deg); } }

/** 24 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {animation:transform- 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:rotate(0deg) scale(); } to{-webkit-transform:rotate(360deg) scale(0.1); } }

@-moz-keyframes transform- { from{-moz-transform:rotate(0deg) scale(); } to{-moz-transform:rotate(360deg) scale(0.1); } }

@keyframes transform- { from{transform:rotate(0deg) scale(); } to{transform:rotate(360deg) scale(0.1); } }

/** 25 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {animation:transform- 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateY(0deg); } to{-webkit-transform:perspective(400px) rotateY(360deg); } }

@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateY(0deg); } to{-moz-transform:perspective(400px) rotateY(360deg); } }

@keyframes transform- { from{transform:perspective(400px) rotateY(0deg); } to{transform:perspective(400px) rotateY(360deg); } }

/** 26 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {animation:transform- 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateX(0deg); } to{-webkit-transform:perspective(400px) rotateX(360deg); } }

@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateX(0deg); } to{-moz-transform:perspective(400px) rotateX(360deg); } }

@keyframes transform- { from{transform:perspective(400px) rotateX(0deg); } to{transform:perspective(400px) rotateX(360deg); } }

/** 27 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {animation:transform- 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateY(0deg); } to{-webkit-transform:perspective(400px) translateZ(150px) rotateY(180deg); } }

@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateY(0deg); } to{-moz-transform:perspective(400px) translateZ(150px) rotateY(180deg); } }

@keyframes transform- { from{transform:perspective(400px) rotateY(0deg); } to{transform:perspective(400px) translateZ(150px) rotateY(180deg); } }

/** 28 **/

#transform- {-webkit-animation:transform- 2s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 2s ease 0s alternate none infinite;}

#transform- {animation:transform- 2s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{-webkit-transform:perspective(400px) translate3d(,,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg); } }

@-moz-keyframes transform- { from{-moz-transform:perspective(400px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{-moz-transform:perspective(400px) translate3d(,,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg); } }

@keyframes transform- { from{transform:perspective(400px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{transform:perspective(400px) translate3d(,,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg); } }

/** 29 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}

#transform- {animation:transform- 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotate3d(,,,0deg); } to{-webkit-transform:perspective(400px) rotate3d(,,,180deg); } }

@-moz-keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,180deg); } }

@keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,180deg); } }

/** 30 **/

#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite; -webkit-transform-origin:% % ;}

#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite; -moz-transform-origin:% % ;}

#transform- {animation:transform- 1s ease 0s alternate none infinite; transform-origin:% % ;}

@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotate3d(,,,0deg); } to{-webkit-transform:perspective(400px) rotate3d(,,,-180deg); } }

@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotate3d(,,,0deg); } to{-moz-transform:perspective(400px) rotate3d(,,,-180deg); } }

@keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,-180deg); } }

/** 31 **/

#transform-origin {-webkit-animation:transform-origin 1s ease 0s alternate none infinite;}

#transform-origin {-moz-animation:transform-origin 1s ease 0s alternate none infinite;}

#transform-origin {animation:transform-origin 1s ease 0s alternate none infinite;}

@-webkit-keyframes transform-origin { from{-webkit-transform:% % ; -webkit-transform:rotate(0deg); } to{-webkit-transform-origin: %; -webkit-transform:rotate(45deg); } }

@-moz-keyframes transform-origin { from{-moz-transform:% % ; -moz-transform:rotate(0deg); } to{-moz-transform-origin: %; transform:rotate(45deg); } }

@keyframes transform-origin { from{transform:% % ; transform:rotate(0deg); } to{transform-origin: %; transform:rotate(45deg); } }

鼠标悬停css3动画效果的更多相关文章

  1. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  4. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  5. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  6. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  7. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  8. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  9. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

随机推荐

  1. NS记录

    NS(Name Server)记录是域名服务器记录,用来指定该域名由哪个DNS服务器来进行解析. 1名词简介 您注册域名时,总有默认的DNS服务器,每个注册的域名都是由一个DNS域名服务器来进行解析的 ...

  2. 自定义nagios check_load告警阀值

    自定义nagios  check_load告警阀值 日期:2012-01-11 来源: heipark 分享至: - 默认check_load配置 define service{ use generi ...

  3. 如何使用 Apache ab 以及 OneAPM 进行压力测试？

    下一个 release 准备小长假后就要 go-live ,所有的测试 case 都 cover 过了,但还未进行过压力测试,有点不放心,刚好过节期间家人都回家去了,假期终于可以抽点时间压测一把. A ...

  4. POJ1258Agri-Net

    http://poj.org/problem?id=1258 题意 : john当上了镇长,打算给每个农场都连接网络,需要用最小的成本连接其他所有农场,所以要找最少的纤维连在一起,任何两个农场之间的距 ...

  5. [SQL Server 系] -- 模糊查询

    SQL Server中的通配符有下面四种 通配符 说明 % 包含零个或多个字符的任意字符串 _(下划线) 任意单个字符 [ ] 任意在指定范围或集合中的单个字符 [^ ] 任意不在指定范围或集合中的单 ...

  6. java.lang.NoClassDefFoundError: JspException

    在打开jsp页面的时候报错java.lang.NoClassDefFoundError: JspException,如下所示: 原因和解决方案: 原因是由于包不全 把该导的包导进去,在上面的例子就是由 ...

  7. P1082 找朋友

    描述 童年的我们,对各种事物充满了好奇与向往.这天,小朋友们对数字产生了兴趣,并且想和数字交朋友.可是,怎么分配这些数字才能使得每个小朋友都唯一地找到一个数字朋友呢?C小朋友说:咱们按自己名字的字典序 ...

  8. Python批量读取人脸图片与数据互相转换

    读取部分结果 程序 # -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt from PIL import ...

  9. 59. Spiral Matrix II

    题目: Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. ...

  10. 开源入侵检测系统OSSEC搭建之二：客户端安装

    上一篇文章中已经将OSSEC服务端的安装以及客户端的Key导出操作做了解说,接下来在另一台虚拟机中安装客户端,与安装服务端类似同样需要安装ossec,步骤如下. 一.下载ossec-hids-2.8. ...