请使用Chrome，火狐的浏览器查看本页面，使用IE将看不到效果。如果在本页看不到一个跳动的小球，请确定您的浏览器支持CSS3，或者访问http://keleyi.com/a/bjac/iphgrtqm.htm 看看。
以下是源代码：
1 <!--[if IE]><style>.main-keleyi-com{display:none;}#ballWrapper_keleyi_com{display:none;}</style><![endif]--> 2 <style type="text/css">/* 代码整理：柯乐义 keleyi.com */ 3 * { 4 margin:0; 5 padding:0; 6 } 7 #ballWrapper_keleyi_com { 8 width: 140px; 9 height: 300px; 10 position: fixed; 11 left: 50%; 12 top: 35%; 13 margin-left: -70px; 14 z-index: 100; 15 -webkit-transform: scale(1); 16 -moz-transform: scale(1); 17 -ms-transform: scale(1); 18 -o-transform: scale(1); 19 transform: scale(1); 20 -webkit-transition: all 5s linear 0s; 21 -moz-transition: all 5s linear 0s; 22 transition: all 5s linear 0s; 23 cursor: pointer; 24 } 25 #ballWrapper_keleyi_com:active { 26 -webkit-transform: scale(0); 27 -moz-transform: scale(0); 28 -ms-transform: scale(0); 29 -o-transform: scale(0); 30 transform: scale(0); 31 cursor: pointer; 32 } 33 #ball { 34 width: 140px; 35 height: 140px; 36 border-radius: 70px; 37 background: rgb(187,187,187); 38 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 39 background: -moz-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 40 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(187, 187, 187, 1)), color-stop(99%, rgba(119, 119, 119, 1))); 41 background: -webkit-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 42 background: -o-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 43 background: -ms-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 44 background: linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 45 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777', GradientType=0 ); 46 box-shadow: inset 0 -5px 15px rgba(255, 255, 255, 0.4), inset -2px -1px 40px rgba(0, 0, 0, 0.4), 0 0 1px #000; 47 position: absolute; 48 top: 0; 49 z-index: 11; 50 -webkit-animation: jump 1s infinite; 51 -moz-animation: jump 1s infinite; 52 -o-animation: jump 1s infinite; 53 -ms-animation: jump 1s infinite; 54 animation: jump 1s infinite; 55 cursor: pointer; 56 }/* 代码整理：柯 乐 义 k e l e y i.com */ 57 #ball::after { 58 content: ""; 59 width: 80px; 60 height: 40px; 61 position: absolute; 62 left: 30px; 63 top: 10px; 64 z-index: 10; 65 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 66 background: -moz-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 67 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(232, 232, 232, 1)), color-stop(1%, rgba(232, 232, 232, 1)), color-stop(100%, rgba(255, 255, 255, 0))); 68 background: -webkit-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 69 background: -o-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 70 background: -ms-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 71 background: linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 72 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff', GradientType=0 ); 73 border-radius: 40px / 20px; 74 } 75 #ballShadow { 76 position: absolute; 77 left: 50%; 78 bottom: 0; 79 z-index: 10; 80 margin-left: -30px; 81 width: 60px; 82 height: 75px; 83 background: rgba(20, 20, 20, .1); 84 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 85 border-radius: 30px / 40px; 86 -webkit-transform: scaleY(.3); 87 -moz-transform: scaleY(.3); 88 -ms-transform: scaleY(.3); 89 -o-transform: scaleY(.3); 90 transform: scaleY(.3); 91 -webkit-animation: shrink 1s infinite; 92 -moz-animation: shrink 1s infinite; 93 -o-animation: shrink 1s infinite; 94 -ms-animation: shrink 1s infinite; 95 animation: shrink 1s infinite; 96 } 97 98 /* Animations */ 99 100 @-webkit-keyframes jump { 101 0% { 102 top: 0; 103 -webkit-animation-timing-function: ease-in; 104 } 105 40% { 106 } 107 50% { 108 top: 140px; 109 height: 140px; 110 -webkit-animation-timing-function: ease-out; 111 } 112 55% { 113 top: 160px; 114 height: 120px; 115 border-radius: 70px / 60px; 116 -webkit-animation-timing-function: ease-in; 117 } 118 65% { 119 top: 120px; 120 height: 140px; 121 border-radius: 70px; 122 -webkit-animation-timing-function: ease-out; 123 } 124 95% { 125 top: 0; 126 -webkit-animation-timing-function: ease-in; 127 } 128 100% { 129 top: 0; 130 -webkit-animation-timing-function: ease-in; 131 } 132 } 133 @-moz-keyframes jump { 134 0% { 135 top: 0; 136 -moz-animation-timing-function: ease-in; 137 } 138 40% { 139 } 140 50% { 141 top: 140px; 142 height: 140px; 143 -moz-animation-timing-function: ease-out; 144 } 145 55% { 146 top: 160px; 147 height: 120px; 148 border-radius: 70px / 60px; 149 -moz-animation-timing-function: ease-in; 150 } 151 65% { 152 top: 120px; 153 height: 140px; 154 border-radius: 70px; 155 -moz-animation-timing-function: ease-out; 156 } 157 95% { 158 top: 0; 159 -moz-animation-timing-function: ease-in; 160 } 161 100% { 162 top: 0; 163 -moz-animation-timing-function: ease-in; 164 } 165 } 166 @-o-keyframes jump { 167 0% { 168 top: 0; 169 -o-animation-timing-function: ease-in; 170 } 171 40% { 172 } 173 50% { 174 top: 140px; 175 height: 140px; 176 -o-animation-timing-function: ease-out; 177 } 178 55% { 179 top: 160px; 180 height: 120px; 181 border-radius: 70px / 60px; 182 -o-animation-timing-function: ease-in; 183 } 184 65% { 185 top: 120px; 186 height: 140px; 187 border-radius: 70px; 188 -o-animation-timing-function: ease-out; 189 } 190 95% { 191 top: 0; 192 -o-animation-timing-function: ease-in; 193 } 194 100% { 195 top: 0; 196 -o-animation-timing-function: ease-in; 197 } 198 } 199 @-ms-keyframes jump { 200 0% { 201 top: 0; 202 -ms-animation-timing-function: ease-in; 203 } 204 40% { 205 } 206 50% { 207 top: 140px; 208 height: 140px; 209 -ms-animation-timing-function: ease-out; 210 } 211 55% { 212 top: 160px; 213 height: 120px; 214 border-radius: 70px / 60px; 215 -ms-animation-timing-function: ease-in; 216 } 217 65% { 218 top: 120px; 219 height: 140px; 220 border-radius: 70px; 221 -ms-animation-timing-function: ease-out; 222 } 223 95% { 224 top: 0; 225 -ms-animation-timing-function: ease-in; 226 } 227 100% { 228 top: 0; 229 -ms-animation-timing-function: ease-in; 230 } 231 } 232 @keyframes jump { 233 0% { 234 top: 0; 235 animation-timing-function: ease-in; 236 } 237 50% { 238 top: 140px; 239 height: 140px; 240 animation-timing-function: ease-out; 241 } 242 55% { 243 top: 160px; 244 height: 120px; 245 border-radius: 70px / 60px; 246 animation-timing-function: ease-in; 247 } 248 65% { 249 top: 120px; 250 height: 140px; 251 border-radius: 70px; 252 animation-timing-function: ease-out; 253 } 254 95% { 255 top: 0; 256 animation-timing-function: ease-in; 257 } 258 100% { 259 top: 0; 260 animation-timing-function: ease-in; 261 } 262 } 263 @-webkit-keyframes shrink { 264 0% { 265 bottom: 0; 266 margin-left: -30px; 267 width: 60px; 268 height: 75px; 269 background: rgba(20, 20, 20, .1); 270 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 271 border-radius: 30px / 40px; 272 -webkit-animation-timing-function: ease-in; 273 } 274 50% { 275 bottom: 30px; 276 margin-left: -10px; 277 width: 20px; 278 height: 5px; 279 background: rgba(20, 20, 20, .3); 280 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .3); 281 border-radius: 20px / 20px; 282 -webkit-animation-timing-function: ease-out; 283 } 284 100% { 285 bottom: 0; 286 margin-left: -30px; 287 width: 60px; 288 height: 75px; 289 background: rgba(20, 20, 20, .1); 290 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 291 border-radius: 30px / 40px; 292 -webkit-animation-timing-function: ease-in; 293 } 294 } 295 @-moz-keyframes shrink { 296 0% { 297 bottom: 0; 298 margin-left: -30px; 299 width: 60px; 300 height: 75px; 301 background: rgba(20, 20, 20, .1); 302 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 303 border-radius: 30px / 40px; 304 -moz-animation-timing-function: ease-in; 305 } 306 50% { 307 bottom: 30px; 308 margin-left: -10px; 309 width: 20px; 310 height: 5px; 311 background: rgba(20, 20, 20, .3); 312 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .3); 313 border-radius: 20px / 20px; 314 -moz-animation-timing-function: ease-out; 315 } 316 100% { 317 bottom: 0; 318 margin-left: -30px; 319 width: 60px; 320 height: 75px; 321 background: rgba(20, 20, 20, .1); 322 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 323 border-radius: 30px / 40px; 324 -moz-animation-timing-function: ease-in; 325 } 326 } 327 @-o-keyframes shrink { 328 0% { 329 bottom: 0; 330 margin-left: -30px; 331 width: 60px; 332 height: 75px; 333 background: rgba(20, 20, 20, .1); 334 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 335 border-radius: 30px / 40px; 336 -o-animation-timing-function: ease-in; 337 } 338 50% { 339 bottom: 30px; 340 margin-left: -10px; 341 width: 20px; 342 height: 5px; 343 background: rgba(20, 20, 20, .3); 344 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .3); 345 border-radius: 20px / 20px; 346 -o-animation-timing-function: ease-out; 347 } 348 100% { 349 bottom: 0; 350 margin-left: -30px; 351 width: 60px; 352 height: 75px; 353 background: rgba(20, 20, 20, .1); 354 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 355 border-radius: 30px / 40px; 356 -o-animation-timing-function: ease-in; 357 } 358 } 359 @-ms-keyframes shrink { 360 0% { 361 bottom: 0; 362 margin-left: -30px; 363 width: 60px; 364 height: 75px; 365 background: rgba(20, 20, 20, .1); 366 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 367 border-radius: 30px / 40px; 368 -ms-animation-timing-function: ease-in; 369 } 370 50% { 371 bottom: 30px; 372 margin-left: -10px; 373 width: 20px; 374 height: 5px; 375 background: rgba(20, 20, 20, .3); 376 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .3); 377 border-radius: 20px / 20px; 378 -ms-animation-timing-function: ease-out; 379 } 380 100% { 381 bottom: 0; 382 margin-left: -30px; 383 width: 60px; 384 height: 75px; 385 background: rgba(20, 20, 20, .1); 386 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 387 border-radius: 30px / 40px; 388 -ms-animation-timing-function: ease-in; 389 } 390 } 391 @keyframes shrink { 392 0% { 393 bottom: 0; 394 margin-left: -30px; 395 width: 60px; 396 height: 75px; 397 background: rgba(20, 20, 20, .1); 398 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 399 border-radius: 30px / 40px; 400 animation-timing-function: ease-in; 401 } 402 50% { 403 bottom: 30px; 404 margin-left: -10px; 405 width: 20px; 406 height: 5px; 407 background: rgba(20, 20, 20, .3); 408 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .3); 409 border-radius: 20px / 20px; 410 animation-timing-function: ease-out; 411 } 412 100% { 413 bottom: 0; 414 margin-left: -30px; 415 width: 60px; 416 height: 75px; 417 background: rgba(20, 20, 20, .1); 418 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 419 border-radius: 30px / 40px; 420 animation-timing-function: ease-in; 421 } 422 } 423 /* 代码整理：柯乐义 keleyi.com */</style> 424 <div style="width:600px;margin:10px auto 20px auto; padding:0 0 0 10px;overflow:hidden"> 425 <section class="main-keleyi-com"> 426 <div id="ballWrapper_keleyi_com"> 427 <div id="ball"></div> 428 <div id="ballShadow"></div> 429 </div> 430 </section> 431 </div>
另一个css3动画：http://keleyi.com/a/bjac/nmwpqgag.htm
