我已经在按钮上尝试过了,也应该适用于图片..这就是你所需要的。
注意:此代码仅使用CSS和HTML来实现你想要的效果。
input#round{
width:100px;
height:100px;
background-color:#05B7FF;
border:1px solid #05B7FF;
color:#fff;
font-size:1.6em;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
-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;
display:inline-block;
}
input#round:hover{
background:#007DC5;
border:1px solid #007DC5;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
它还有其他美丽的特性,如推动效果。值得一试。优雅。
注意:您可以编辑转换持续时间,然后进行另一个动画。这是您的决定。