我想在選擇時使列表項「縮放」。我無法找到實現此目標的最佳方法。我正在使用GSAP,JavaScript工作得很好,但我很難找到哪個屬性最能達到所需的「縮放」效果。如何使這個列表項「縮放」
https://jsfiddle.net/Leahp374/1/
目前,我試圖使用CSS perspective
和translate3d
移動項目在Z方向靠攏。但是,由於perspective-origin
位於50% 50%
,並且由於列表項在其父容器中居中,所以第一個和最後一個列表項分別向頂部和底部移動。相反,我希望他們都能成爲中間列表項目。
使用像font-size
這樣的東西會導致元素根據新的寬度「重新居中」,這是不可取的。
實現「縮放」效果的最佳方法是什麼?
https://jsfiddle.net/Leahp374/2/ – Rayon
@Rayon,謝謝。 JavaScript不是問題。我想知道哪些CSS屬性最適合製作動畫。我剛剛發現它:'scale'。 –
我會以某種方式在'ul'上設置一個寬度。這樣你可以使用'font-size'並讓文本溢出,這樣它就不會_re-center_。 [類似這樣](https://jsfiddle.net/Leahp374/3/)。 – hungerstar