Question

我想创建一个Metro Style网站，并希望添加如下所示的按钮：

http://themeforest.net/item/metro-lab-responsive-metro-dashboard-template/full_screen_preview/5359122

当我们将鼠标悬停在“新用户”，“销售”等标签上时，标签中的图标/图片会旋转，增加其大小并失去不透明度。

但我无法得到确切的输出。我一次只得到2个输出： - ＆GT;不透明度和缩放 - ＆GT;不透明度和旋转

但并非所有这些都同时发生。

你可以看到我到达的地方：

http://developer.nuevothoughts.com/jiteen/attendance/docs/#

我当前的CSS是：

.icon-rocket{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}  

.icon-rocket:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);

/******************************/

-webkit-transform: scale(2.5,2.5);
-moz-transform:scale(2.5,2.5);
opacity: 0.5;
-moz-opacity: 0.5; 
}

我很感激这方面的任何帮助。

Answer 1

添加以下代码

.main_tab.shortcut.span2.padding20.text-center a:hover i {
  font-size: 40px;
  opacity: 0.5;
  transform: rotate(45deg);
}

并删除您使用的悬停（icon-rocket：hover）

CSS3同时图像旋转，缩放，动画和不透明度降低

1 个答案: