鍍金池/ 問答/HTML/ 如何消除元素放大縮小,對其他元素造成的影響

如何消除元素放大縮小,對其他元素造成的影響

在代碼中插入了一排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;}

回答
編輯回答
墨染殤

css3的 transform可以解決,如若兼容性好,建議使用定位使其脫離文檔流。

2017年12月24日 11:00
編輯回答
遲月

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

2018年2月8日 11:11
編輯回答
痞性

可以使用transform放大縮小元素,元素放大后所占的位置并不會變大。transform還有許多好用的功能,詳情請看mdn的介紹。

transform: scale(2);
2017年6月18日 21:14