下载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. centos6.5\win7双系统安装配置

    一.安装所需软件 1.分区助手专业版PACNPro.exe(必需):用来对硬盘分区,将磁盘的一部分格式化成Linux可以识别的ext3格式 2.Ext2Fsd(硬盘安装必需,光盘安装不用):因为Win ...

  2. LA 4329

    第一次敲树状数组  因为一个小错误 wa了 n 多遍  终于ac  太不容易了 /*********************************************************** ...

  3. soap消息机制 讲解

    SOAP(Simple Object Access Protocol,简单对象访问协议)作为一种信息交互协议在分布式应用中非常广泛,如WebService.在使用.Net开发WebService时候, ...

  4. What is the Best Programming Language to Learn in 2014?

    It’s been a year since I revealed the best languages to learn in 2013. Once again, I’ve examined the ...

  5. zoj 2777 Visible Lattice Points（欧拉函数，基础）

    题目 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> #include<algo ...

  6. POJ 1775

    #include <iostream> using namespace std; ,,,,,,,,,}; bool boo; void DFS(int time,int sum); int ...

  7. 套题T7

    P4712 铺瓷砖 时间: 1000ms / 空间: 65536KiB / Java类名: Main   描述

  8. 毕向东JAVA视频讲解（第六课）

    用java语言对现实生活中的事物进行描述. 通过类的形式来体现的. 怎么描述呢? 对于事物描述通常只关注两方面. 一个是属性,一个是行为. 只要明确该事物的属性和行为并定义在类中即可. 对象:其实就是 ...

  9. python logging 学习笔记

    logging.basicConfig函数各参数: filename: 指定日志文件名 filemode: 和file函数意义相同,指定日志文件的打开模式,'w'或'a' format: 指定输出的格 ...

  10. Android handler.obtainMessage()

    在handler.obtainMessage()的参数是这样写的: Message android.os.Handler.obtainMessage(int what, int arg1, int a ...