下载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. 给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动

    我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...

  2. java reflect 例子

    public static void main(String[] args) { Student stu1 = new Student(); stu1.setId(1); stu1.setName(& ...

  3. java基础知识回顾之---java StringBuffer类

    /*         * StringBuffer:就是字符串缓冲区,线程安全.         * 用于存储数据的容器.         * 特点:         * 1,长度的可变的.      ...

  4. linux下cat命令详解

    简略版: cat主要有三大功能:1.一次显示整个文件.$ cat filename2.从键盘创建一个文件.$ cat > filename     只能创建新文件,不能编辑已有文件.3.将几个文 ...

  5. hdu 4187 Alphabet Soup

    这题的主要就是找循环节数,这里用找字符串最小覆盖来实现,也就是n-next[n],证明在这http://blog.csdn.net/fjsd155/article/details/6866991 #i ...

  6. Android 使用MediaRecorder录音

    package com.example.HyyRecord; import android.app.Activity; import android.content.Intent; import an ...

  7. net中使用母版页

    .net中使用母版页的优点 母版页提供了开发人员已通过传统方式创建的功能,这些传统方式包括重复复制现有代码.文本和控件元素:使用框架集:对通用元素使用包含文件:使用 ASP.NET 用户控件等.母版页 ...

  8. ASP.NET连接数据库并获取数据

    关键词:连接对象的用法SqlConnection,SqlCommand,SqlDataAdapter *数据访问方式的写法 工具/原料 VS SQL SERVER 2012 R2 方法/步骤1: 1. ...

  9. StringBuffer的用法

    StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...

  10. Android给listview的item设定高度

    在item的layout文件中,用android:layout_height设置item的高度.运行,高度设置无效. 解决办法: 给item设定minHeight,即可. -------------- ...