Question

我创建了一个sudo CSS“Zoom”效果，如下所示：

li{
  width: 200px;
    display: block;
    height: 30px;
  line-height: 30px;
  text-align: center;
  display: block;
  background: #eee;
  border: 1px solid #333;
  margin: 0 0 0 -40px;
    transition: all 0.5s ease;
  z-index: 999;

  &.active{
    background: #ccc;
  }
}

li:hover{
    position: relative;
  width: 205px;
  height: 35px;
  background: #eee;
  margin: -2.5px 0 -2.5px -42.5px;
  -webkit-box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.95);
  -moz-box-shadow:    0px 0px 19px 0px rgba(50, 50, 50, 0.95);
  box-shadow:         0px 0px 19px 0px rgba(50, 50, 50, 0.95);
}

代码笔http://codepen.io/timbo27/pen/aeCgv

在纯CSS中必须有一种更优雅的方法。

谢谢，

添

Answer 1

是否更优雅取决于你，但你可以尝试CSS3规模。以下是它的一个小提琴：

http://jsfiddle.net/27Syr/5/

transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */

Answer 2

所以在我的评论员的帮助下，有一个答案。

http://codepen.io/anon/pen/pGAIo

不要忘记前缀。否则它将无法工作。

li:hover{
     -webkit-transform:scale(1.05);
     -moz-transform:scale(1.05);
     transform:scale(1.05);
}

CSS缩放效果？

2 个答案: