下载Demo

效果预览

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鼠标悬停css3动画效果</title>
  6.     <link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
  7.     <style>
  8.       .main a:not(:hover):not(:target) {-webkit-animation: 0s ease 0s normal none  none;}
  9.        .main a:not(:hover):not(:target) {-moz-animation: 0s ease 0s normal none  none;}
  10.       .main a:not(:hover):not(:target) {animation: 0s ease 0s normal none  none !important;}
  11.     </style>
  12. </head>
  13. <body>
  14. <div class="box">
  15.   <div class="main">
  16.     <a id="border-radius"></a>
  17.     <a id="border-radius-2"></a>
  18.     <a id="border-width"></a>
  19.     <a id="border-width-2"></a>
  20.     <a id="border-width-3"></a>
  21.     <a id="background-color"></a>
  22.     <a id="background-position"></a>
  23.     <a id="background-position-2"></a>
  24.     <a id="background-size"></a>
  25.     <a id="text-shadow"></a>
  26.     <a id="text-shadow-2"></a>
  27.     <a id="text-shadow-3"></a>
  28.     <a id="box-shadow"></a>
  29.     <a id="box-shadow-2"></a>
  30.     <a id="font-size"></a>
  31.     <a id="font-size-2"></a>
  32.     <a id="letter-spacing"></a>
  33.     <a id="text-indent"></a>
  34.     <a id="height"></a>
  35.     <a id="line-height"></a>
  36.     <a id="transform"></a>
  37.     <a id="transform-2"></a>
  38.     <a id="transform-3"></a>
  39.     <a id="transform-4"></a>
  40.     <a id="transform-5"></a>
  41.     <a id="transform-6"></a>
  42.     <a id="transform-7"></a>
  43.     <a id="transform-8"></a>
  44.     <a id="transform-9"></a>
  45.     <a id="transform-10"></a>
  46.     <a id="transform-origin"></a>
  47.     <a id=""></a>
  48.   </div>
  49. </div>
  50. </body>
  51. </html>

CSS:

  1. body, h1, p, ul, li {padding:; margin:;}
  2. ul, li {list-style:none;}
  3. body {font-family:Futura,'Century Gothic',sans-serif; background:url(../images/bg.jpg) repeat;}
  4. a {color:#; text-decoration:none;}
  5. .box {width:%; margin:50px ; text-align:center;}
  6. .box h1 {text-align:center; font-size:%; line-height:; margin-bottom:20px;}
  7. .box h1 p {font-size:26px; color:#c6c6c6; display:block;}
  8. .box h1 p a {color:#c6c6c6;}
  9. .hover-all {margin-top:20px;}
  10. #hover, #all {font-size:12px; background-color:#; padding:5px 10px; margin:10px; color:#FFF; border-radius:2px;}
  11. #hover:hover, #all:hover {background-color:#;}
  12. .main {width:%; margin:10px auto; counter-reset:demo;}
  13. .main:after {content:""; clear:both; display:block;}
  14. .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;}
  15. .main a:before {content:counter(demo, decimal);}
  16. .main a:after {content:attr(id); position:absolute; color:#; font-size:14px; right:; left:; bottom:-20px; line-height:; text-shadow:none; letter-spacing:;}
  17. .info {margin-top:30px; font-size:12px;}
  18.  
  19. /** 1 **/
  20. #border-radius {-webkit-animation:border-radius 1s ease 0s alternate none infinite;}
  21. #border-radius {-moz-animation:border-radius 1s ease 0s alternate none infinite;}
  22. #border-radius {animation:border-radius 1s ease 0s alternate none infinite;}
  23. @-webkit-keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }
  24. @-moz-keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }
  25. @keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }
  26.  
  27. /** 2 **/
  28. #border-radius- {-webkit-animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}
  29. #border-radius- {-moz-animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}
  30. #border-radius- {animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}
  31. @-webkit-keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }
  32. @-moz-keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }
  33. @keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }
  34.  
  35. /** 3 **/
  36. #border-width {-webkit-animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}
  37. #border-width {-moz-animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}
  38. #border-width {animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}
  39. @-webkit-keyframes border-width { from{border-width:; } to{ border-width:80px;} }
  40. @-moz-keyframes border-width { from{border-width:; } to{ border-width:80px;} }
  41. @keyframes border-width { from{border-width:; } to{ border-width:80px;} }
  42.  
  43. /** 4 **/
  44. #border-width- {-webkit-animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}
  45. #border-width- {-moz-animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}
  46. #border-width- {animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}
  47. @-webkit-keyframes border-width- { from{border-width:; } to{ border-width:60px;} }
  48. @-moz-keyframes border-width- { from{border-width:; } to{ border-width:60px;} }
  49. @keyframes border-width- { from{border-width:; } to{ border-width:60px;} }
  50.  
  51. /** 5 **/
  52. #border-width- {-webkit-animation:border-width- 1s ease 0s alternate none infinite; border: double #;}
  53. #border-width- {-moz-animation:border-width- 1s ease 0s alternate none infinite; border: double #;}
  54. #border-width- {animation:border-width- 1s ease 0s alternate none infinite; border: double #;}
  55. @-webkit-keyframes border-width- { from{border-width:; } to{ border-width:80px;} }
  56. @-moz-keyframes border-width- { from{border-width:; } to{ border-width:80px;} }
  57. @keyframes border-width- { from{border-width:; } to{ border-width:80px;} }
  58.  
  59. /** 6 **/
  60. #background-color {-webkit-animation:background-color 1s ease 0s alternate none infinite;}
  61. #background-color {-moz-animation:background-color 1s ease 0s alternate none infinite;}
  62. #background-color {animation:background-color 1s ease 0s alternate none infinite;}
  63. @-webkit-keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }
  64. @-moz-keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }
  65. @keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }
  66.  
  67. /** 7 **/
  68. #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;}
  69. #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;}
  70. #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;}
  71. @-webkit-keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }
  72. @-moz-keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }
  73. @keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }
  74.  
  75. /** 8 **/
  76. #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;}
  77. #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;}
  78. #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;}
  79. @-webkit-keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }
  80. @-moz-keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }
  81. @keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }
  82.  
  83. /** 9 **/
  84. #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;}
  85. #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;}
  86. #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;}
  87. @-webkit-keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }
  88. @-moz-keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }
  89. @keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }
  90.  
  91. /** 10 **/
  92. #text-shadow{-webkit-animation:text-shadow 1s ease 0s alternate none infinite;}
  93. #text-shadow{-moz-animation:text-shadow 1s ease 0s alternate none infinite;}
  94. #text-shadow{animation:text-shadow 1s ease 0s alternate none infinite;}
  95. @-webkit-keyframes text-shadow { from{text-shadow:  #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }
  96. @-moz-keyframes text-shadow { from{text-shadow:  #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }
  97. @keyframes text-shadow { from{text-shadow:  #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }
  98.  
  99. /** 11 **/
  100. #text-shadow- {-webkit-animation:text-shadow- 1s ease 0s alternate none infinite;}
  101. #text-shadow- {-moz-animation:text-shadow- 1s ease 0s alternate none infinite;}
  102. #text-shadow- {animation:text-shadow- 1s ease 0s alternate none infinite;}
  103. @-webkit-keyframes text-shadow- { from{text-shadow:   #; } to{text-shadow:  20px #FFF; } }
  104. @-moz-keyframes text-shadow- { from{text-shadow:   #; } to{text-shadow:  20px #FFF; } }
  105. @keyframes text-shadow- { from{text-shadow:   #; } to{text-shadow:  20px #FFF; } }
  106.  
  107. /** 12 **/
  108. #text-shadow- {-webkit-animation:text-shadow- 1s ease 0s alternate none infinite;}
  109. #text-shadow- {-moz-animation:text-shadow- 1s ease 0s alternate none infinite;}
  110. #text-shadow- {animation:text-shadow- 1s ease 0s alternate none infinite;}
  111. @-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; } }
  112. @-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; } }
  113. @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; } }
  114.  
  115. /** 13 **/
  116. #box-shadow {-webkit-animation:box-shadow 1s ease 0s alternate none infinite; -webkit-box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF;}
  117. #box-shadow {-moz-animation:box-shadow 1s ease 0s alternate none infinite; -moz-box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF;}
  118. #box-shadow {animation:box-shadow 1s ease 0s alternate none infinite; box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF;}
  119. @-webkit-keyframes box-shadow { from{box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF; } to{box-shadow:inset   35px 50px #ccc,   75px 50px #ccc; } }
  120. @-moz-keyframes box-shadow { from{box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF; } to{box-shadow:inset   35px 50px #ccc,   75px 50px #ccc; } }
  121. @keyframes box-shadow { from{box-shadow:  75px 75px #BFBFBF inset,    #BFBFBF; } to{box-shadow:inset   35px 50px #ccc,   75px 50px #ccc; } }
  122.  
  123. /** 14 **/
  124. #box-shadow-{-webkit-animation:box-shadow- 1s ease 0s alternate none infinite;}
  125. #box-shadow-{-moz-animation:box-shadow- 1s ease 0s alternate none infinite;}
  126. #box-shadow-{animation:box-shadow- 1s ease 0s alternate none infinite;}
  127. @-webkit-keyframes box-shadow- { from{box-shadow:  #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }
  128. @-moz-keyframes box-shadow- { from{box-shadow:  #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }
  129. @keyframes box-shadow- { from{box-shadow:  #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }
  130.  
  131. /** 15 **/
  132. #font-size {-webkit-animation:font-size 1s ease 0s alternate none infinite;}
  133. #font-size {-moz-animation:font-size 1s ease 0s alternate none infinite;}
  134. #font-size {animation:font-size 1s ease 0s alternate none infinite;}
  135. @-webkit-keyframes font-size { from{font-size:80px; } to{font-size:10px; } }
  136. @-moz-keyframes font-size { from{font-size:80px; } to{font-size:10px; } }
  137. @keyframes font-size { from{font-size:80px; } to{font-size:10px; } }
  138.  
  139. /** 16 **/
  140. #font-size- {-webkit-animation:font-size- 1s ease 0s alternate none infinite;}
  141. #font-size- {-moz-animation:font-size- 1s ease 0s alternate none infinite;}
  142. #font-size- {animation:font-size- 1s ease 0s alternate none infinite;}
  143. @-webkit-keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }
  144. @-moz-keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }
  145. @keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }
  146.  
  147. /** 17 **/
  148. #letter-spacing {-webkit-animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}
  149. #letter-spacing {-moz-animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}
  150. #letter-spacing {animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}
  151. @-webkit-keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }
  152. @-moz-keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }
  153. @keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }
  154.  
  155. /** 18 **/
  156. #text-indent {-webkit-animation:text-indent 1s ease 0s alternate none infinite;}
  157. #text-indent {-moz-animation:text-indent 1s ease 0s alternate none infinite;}
  158. #text-indent {animation:text-indent 1s ease 0s alternate none infinite;}
  159. @-webkit-keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }
  160. @-moz-keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }
  161. @keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }
  162.  
  163. /** 19 **/
  164. #height {-webkit-animation:height 1s ease 0s alternate none infinite;}
  165. #height {-moz-animation:height 1s ease 0s alternate none infinite;}
  166. #height {animation:height 1s ease 0s alternate none infinite;}
  167. @-webkit-keyframes height { from{height:175px; } to{height:10px; } }
  168. @-moz-keyframes height { from{height:175px; } to{height:10px; } }
  169. @keyframes height { from{height:175px; } to{height:10px; } }
  170.  
  171. /** 20 **/
  172. #line-height {-webkit-animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}
  173. #line-height {-moz-animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}
  174. #line-height {animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}
  175. @-webkit-keyframes line-height { from{line-height:60px; } to{line-height:350px; } }
  176. @-moz-keyframes line-height { from{line-height:60px; } to{line-height:350px; } }
  177. @keyframes line-height { from{line-height:60px; } to{line-height:350px; } }
  178.  
  179. /** 21 **/
  180. #transform {-webkit-animation:transform 1s ease 0s alternate none infinite;}
  181. #transform {-moz-animation:transform 1s ease 0s alternate none infinite;}
  182. #transform {animation:transform 1s ease 0s alternate none infinite;}
  183. @-webkit-keyframes transform { from{-webkit-transform:rotate(0deg); } to{-webkit-transform:rotate(360deg); } }
  184. @-moz-keyframes transform { from{-moz-transform:rotate(0deg); } to{-moz-transform:rotate(360deg); } }
  185. @keyframes transform { from{transform:rotate(0deg); } to{transform:rotate(360deg); } }
  186.  
  187. /** 22 **/
  188. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
  189. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
  190. #transform- {animation:transform- 1s ease 0s alternate none infinite;}
  191. @-webkit-keyframes transform- { from{-webkit-transform:scale(); } to{-webkit-transform:scale(); } }
  192. @-moz-keyframes transform- { from{-moz-transform:scale(); } to{-moz-transform:scale(); } }
  193. @keyframes transform- { from{transform:scale(); } to{transform:scale(); } }
  194.  
  195. /** 23 **/
  196. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
  197. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
  198. #transform- {animation:transform- 1s ease 0s alternate none infinite;}
  199. @-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); } }
  200. @-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); } }
  201. @keyframes transform- { from{transform:skewX(0deg); } %{transform:skewX(30deg); } %{transform:skewX(0deg); } %{transform:skewX(-30deg); } to{transform:skewX(0deg); } }
  202.  
  203. /** 24 **/
  204. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
  205. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
  206. #transform- {animation:transform- 1s ease 0s alternate none infinite;}
  207. @-webkit-keyframes transform- { from{-webkit-transform:rotate(0deg) scale(); } to{-webkit-transform:rotate(360deg) scale(0.1); } }
  208. @-moz-keyframes transform- { from{-moz-transform:rotate(0deg) scale(); } to{-moz-transform:rotate(360deg) scale(0.1); } }
  209. @keyframes transform- { from{transform:rotate(0deg) scale(); } to{transform:rotate(360deg) scale(0.1); } }
  210.  
  211. /** 25 **/
  212. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
  213. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
  214. #transform- {animation:transform- 1s ease 0s alternate none infinite;}
  215. @-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateY(0deg); } to{-webkit-transform:perspective(400px) rotateY(360deg); } }
  216. @-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateY(0deg); } to{-moz-transform:perspective(400px) rotateY(360deg); } }
  217. @keyframes transform- { from{transform:perspective(400px) rotateY(0deg); } to{transform:perspective(400px) rotateY(360deg); } }
  218.  
  219. /** 26 **/
  220. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
  221. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
  222. #transform- {animation:transform- 1s ease 0s alternate none infinite;}
  223. @-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateX(0deg); } to{-webkit-transform:perspective(400px) rotateX(360deg); } }
  224. @-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateX(0deg); } to{-moz-transform:perspective(400px) rotateX(360deg); } }
  225. @keyframes transform- { from{transform:perspective(400px) rotateX(0deg); } to{transform:perspective(400px) rotateX(360deg); } }
  226.  
  227. /** 27 **/
  228. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
  229. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
  230. #transform- {animation:transform- 1s ease 0s alternate none infinite;}
  231. @-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateY(0deg); } to{-webkit-transform:perspective(400px) translateZ(150px) rotateY(180deg); } }
  232. @-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateY(0deg); } to{-moz-transform:perspective(400px) translateZ(150px) rotateY(180deg); } }
  233. @keyframes transform- { from{transform:perspective(400px) rotateY(0deg); } to{transform:perspective(400px) translateZ(150px) rotateY(180deg); } }
  234.  
  235. /** 28 **/
  236. #transform- {-webkit-animation:transform- 2s ease 0s alternate none infinite;}
  237. #transform- {-moz-animation:transform- 2s ease 0s alternate none infinite;}
  238. #transform- {animation:transform- 2s ease 0s alternate none infinite;}
  239. @-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); } }
  240. @-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); } }
  241. @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); } }
  242.  
  243. /** 29 **/
  244. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
  245. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
  246. #transform- {animation:transform- 1s ease 0s alternate none infinite;}
  247. @-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotate3d(,,,0deg); } to{-webkit-transform:perspective(400px) rotate3d(,,,180deg); } }
  248. @-moz-keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,180deg); } }
  249. @keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,180deg); } }
  250.  
  251. /** 30 **/
  252. #transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite; -webkit-transform-origin:% % ;}
  253. #transform- {-moz-animation:transform- 1s ease 0s alternate none infinite; -moz-transform-origin:% % ;}
  254. #transform- {animation:transform- 1s ease 0s alternate none infinite; transform-origin:% % ;}
  255. @-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotate3d(,,,0deg); } to{-webkit-transform:perspective(400px) rotate3d(,,,-180deg); } }
  256. @-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotate3d(,,,0deg); } to{-moz-transform:perspective(400px) rotate3d(,,,-180deg); } }
  257. @keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,-180deg); } }
  258.  
  259. /** 31 **/
  260. #transform-origin {-webkit-animation:transform-origin 1s ease 0s alternate none infinite;}
  261. #transform-origin {-moz-animation:transform-origin 1s ease 0s alternate none infinite;}
  262. #transform-origin {animation:transform-origin 1s ease 0s alternate none infinite;}
  263. @-webkit-keyframes transform-origin { from{-webkit-transform:% % ; -webkit-transform:rotate(0deg); } to{-webkit-transform-origin: %; -webkit-transform:rotate(45deg); } }
  264. @-moz-keyframes transform-origin { from{-moz-transform:% % ; -moz-transform:rotate(0deg); } to{-moz-transform-origin: %; transform:rotate(45deg); } }
  265. @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. [转载]Spring Bean Configuration Inheritance

    转自: http://www.mkyong.com/spring/spring-bean-configuration-inheritance/ In Spring, the inheritance i ...

  2. hdu 3661 Assignments（水题的解法）

    题目 //最早看了有点云里雾里,看了解析才知道可以很简单的排序过 #include<stdio.h> #include<string.h> #include<algori ...

  3. UVA 133 The Dole Queue(报数问题)

    题意:一个长度为N的循环队列,一个人从1号开始逆时针开始数数,第K个出列,一个人从第N个人开始顺时针数数,第M个出列,选到的两个人要同时出列(以不影响另一个人数数),选到同一个人就那个人出列. 思路: ...

  4. C# 在vs2010中打开vs2012的项目(转)

    在vs2010中打开vs2012的项目 今天在自己的电脑上装了vs2010然后要打开之前在vs2012上创建的sln文件 被提示-- 无法打开在新版本上创建的sln--解决方案--文件 其实vs201 ...

  5. FileOutputStream和FileInputStream

    package one.string; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFound ...

  6. 【tyvj】P1049 最长不下降子序列

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 求最长不下降子序列的长度 输入格式 第一行为n,表示n个数 第二行n个数 输出格式 最长不下降子序列的长度 测 ...

  7. 对cost函数的概率解释

    Likehood函数即似然函数,是概率统计中经常用到的一种函数,其原理网上很容易找到,这里就不讲了.这篇博文主要讲解Likelihood对回归模型的Probabilistic interpretati ...

  8. 【Linux高频命令专题(12)】touch.md

    概述 一般在使用make的时候可能会用到,用来修改文件时间,或者新建一个不存在的文件. 命令格式 touch [选项]... 文件... 命令参数 -a 或--time=atime或--time=ac ...

  9. python 获取当前调用函数名等log信息

    import sys funcName = sys._getframe().f_back.f_code.co_name #获取调用函数名 lineNumber = sys._getframe().f_ ...

  10. CSDN代码片排版

    CSDN上发博文,尤其是有代码的,要用好“插入代码”功能(见下图).这是必须的,未来的IT程序员,需要用这种方式,展示出自己的代码.这是尊重读者,树立品牌的需要. 相关方法,参考见视频<发布第一 ...