css3控制div上下跳动
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 @-webkit-keyframes bounce-down { 8 25% {-webkit-transform: translateY(-10px);} 9 50%, 100% {-webkit-transform: translateY(0);} 10 75% {-webkit-transform: translateY(10px);} 11 } 12 13 @keyframes bounce-down { 14 25% {transform: translateY(-10px);} 15 50%, 100% {transform: translateY(0);} 16 75% {transform: translateY(10px);} 17 } 18 19 .animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite; 20 } 21 22 @-webkit-keyframes bounce-up { 23 25% {-webkit-transform: translateY(10px);} 24 50%, 100% {-webkit-transform: translateY(0);} 25 75% {-webkit-transform: translateY(-10px);} 26 } 27 28 @keyframes bounce-up { 29 25% {transform: translateY(10px);} 30 50%, 100% {transform: translateY(0);} 31 75% {transform: translateY(-10px);} 32 } 33 34 .animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;} 35 </style> 36 </head> 37 38 <body> 39 <div class="animate-bounce-up"></div> 40 <div class="animate-bounce-down"></div> 41 </body> 42 </html>
这个例子是直接应用css3来控制div层上下来回滚动；
这需要熟练应用@keyframes 规则，@keyframes bounce-up中的bounce-up是个动作名称，这个元素可以自行定义，只要在 animation: bounce-up匹配到就可以的。
