Question

我的代码在这里：my example 问题在于具体部分：

{{1}}

由于某种原因绘制了阴影，但没有多种转换可行。任何建议都将非常感谢，因为这是我的第一个CSS / HTML项目。

Answer 1

尝试：

transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);

我相信你应该总是单独使用浏览器特定的属性来做这样的事情，同时添加了泛型变换

Answer 2

变换不适用于动画。这基本上为您提供了两个选项：使用缩放代替变换，或将transform：scale应用于另一个没有任何动画属性的元素。过渡不支持缩放，因此如果要平滑缩放红色元素，我建议使用第二个选项。

幸运的是，你已经在circle_menu div中拥有了自己的id（＃first，＃second，...）div，所以你可以使用它们：http://jsfiddle.net/stby04/bsr3am0y/

#first, #second,#third,#fourth {
    z-index: 4;
    text-align: center;
    position:absolute;
    margin-top: 10px;
    margin-bottom:10px;
    line-height: 100%;
    width: 100px;
    height: 100%;
    background: red;
    color: white;
    font-size: 80px;
    border-radius: 50px;
    transition: transform 0.4s;
}


#circle_menu1:hover, #circle_menu2:hover,#circle_menu3:hover,#circle_menu4:hover{
    -webkit-transform:scale(1.5);
    -webkit-box-shadow: 0 0 20px black;
}

我认为你可以稍微清理我的CSS，但它应该证明它是如何工作的。

并且，正如已经提到的，还包括-moz前缀和没有前缀的属性，以使其在所有现代浏览器中都有效（我实际上认为只有Safari仍然需要一些-webkit前缀）。并且border-radius肯定在所有当前浏览器中都没有前缀。

CSS -webkit-transform在悬停时不会发生

2 个答案: