css - 如何缩放和旋转圆形搜索按钮？

Question

我已经四舍五入提交 btn，我想从一开始就缩放到 80%，当我悬停它时，我希望它缩放到 100% 并旋转 360 度。这是代码，我没有运气在网上找到任何答案。

header #searchbtn{
background: url(../img/roundedsearchbtn.png) no-repeat;
border: 0;
cursor: pointer;
display: inline-block;
float: right;
height: 41px;
filter: alpha(opacity=60);
opacity: 0.60;

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;

overflow: hidden;
text-indent: 100%;
width: 41px;

-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-transform: scale(0.8);
}

header #searchbtn:hover, header #searchbtn:focus {
filter: alpha(opacity=100);
opacity: 1;

-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-ms-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
-transform: rotate(360deg) scale(1);
}

Answer 1

这就是你想要的？ Fiddle

只需添加这些 CSS 规则:

button {
    -webkit-transform: rotate(0) scale(.8,.8);
    -moz-transform: rotate(0) scale(.8,.8);
    transform: rotate(0) scale(.8,.8);
}

button:hover {
    -webkit-transform: rotate(360deg) scale(1,1);
    -moz-transform: rotate(360deg) scale(1,1);
    transform: rotate(360deg) scale(1,1);
}