css3带动画效果的漂亮的按钮

用IE9及以下版本的朋友就不用看了，你懂得./*Common styles for buttons*/.button { background-image: linear-gradient( rgba(255,255,255,0.6), rgba(0,0,0,0.6) ); display: inline-block; height: 70px; width: 120px; line-height: 70px; /*Same as height*/ margin: 5px; color: white; font-size: 12px; font-weight: bold; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);}#rgb { background-color: #FF0; /*yellow*/ animation: rgb 3s infinite alternate;}@keyframes rgb { /* 0% will fallback to the default background-color of #rgb*/ 50% {background-color: #06F; /*blue*/ } 100% {background-color: #F00; /*red*/}}#namedcolors { background-color: red; animation: namedcolors 0.3s infinite alternate;}@keyframes namedcolors { 100% {background-color: orange;}}#hue { background-color: hsl(0, 100%, 50%); /*red*/ animation: hue 3s infinite alternate;}@keyframes hue { /*hue will animate from 0 to 360. Saturation and Lightness remain constant*/ 20% {background-color: hsl(72, 100%, 50%);} 40% {background-color: hsl(144, 100%, 50%);} 60% {background-color: hsl(216, 100%, 50%);} 80% {background-color: hsl(288, 100%, 50%);} 100% {background-color: hsl(360, 100%, 50%);}}#saturation { /*0% saturated red = grey*/ background-color: hsl(0, 0%, 50%); animation: saturation 3s infinite alternate;}@keyframes saturation { /*100% saturated red*/ 100% {background-color: hsl(0, 100%, 50%); }}#lightness { /*0% lightness = black*/ background-color: hsl(0, 100%, 0%); animation: lightness 3s infinite alternate;}@keyframes lightness { /*50% lightness = red*/ 50% {background-color: hsl(0, 100%, 50%); } /*100% lightness = white*/ 100% {background-color: hsl(0, 100%, 100%); }}/*animating gradients to flat colors - a bit complex*/#topflat { color: #999; /*a transparent-black gradient above white base, making it a white-black gradient*/ background-color: white; background-image: linear-gradient(rgba(0, 0, 0, 0), black); animation: topflat 3s infinite alternate;}@keyframes topflat { 100% {background-color: black;}}#bottomflat { color: #999; /*a white-transparent gradient above black base, making it a white-black gradient*/ background-color: black; background-image: linear-gradient(white, rgba(255, 255, 255, 0)); animation: bottomflat 3s infinite alternate;}@keyframes bottomflat { 100% {background-color: white;}}

在线演示        积分下载        6毛下载        砍两刀下载