如何消除元素放大缩小,对其他元素造成的影响

greatvia
  • 1
新手上路,请多包涵

在代码中插入了一排4个 ICON,添加了hove放大的效果,但是一个ICON放大的时候,会影响到其他的,都会有一个晃动的效果, 如何消除这种效果?已经试图通过 margin来调整相互之间的空间了,但是不能做到互不影响。

clipboard.png

clipboard.png

                               <i class="fa fa-flag"></i>
                               <i class="fa fa-check-square-o"></i>
                                <i class="fa fa-eye"></i>
                                <i class="fa fa-edit"></i>
                            </a>

.fa-flag { margin: 5px 3px; }
.fa-flag:hover ,
.fa-flag:target { color: #ff00ff; font-size:20px; margin: 1px 1px;}

回复
阅读 3.3k
3 个回答

可以使用transform放大缩小元素,元素放大后所占的位置并不会变大。transform还有许多好用的功能,详情请看mdn的介绍

transform: scale(2);

transform: rotate(360deg);-webkit-transform: rotate(360deg);

css3的 transform可以解决,如若兼容性好,建议使用定位使其脱离文档流。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏