css旋转播放按钮,使用CSS3创建一个旋转可变色按钮

旋转图片

.button{

background:#aaa;

color:#555;

font-weight:bold;

font-size:15px;

padding:10px 15px;

border:none;

margin:50px;

cursor:pointer;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;

-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;

-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

-webkit-border-radius:5px;

border-radius:5px;

box-shadow:0 0 2px rgba(0,0,0,0.5);

text-shadow:0 0 5px rgba(255,255,255,0.5);

display:inline-block; /它是重要为按钮旋转/

}

.button:hover

{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

background:#99A411;

font-size:30px;

color:#fff;

}

旋转按钮

原文 ：http://blog.csdn.net/newzzorg/article/details/8451287

其实我想要一个旋转后变成另一个图片的，但是这个我觉得已经很棒了，先保存下来了。