CSS中心放大動畫是一種常用的CSS動畫效果,這個效果可以讓一個元素居中顯示,并在鼠標懸停時放大顯示。下面是實現這個效果的代碼:
.container { position: relative; width: 300px; height: 300px; margin: 0 auto; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: #333; transition: transform 0.5s ease; } .box:hover { transform: translate(-50%, -50%) scale(1.2); }
這里我們首先定義了一個容器元素,它的寬度和高度都為300px,并且使用margin: 0 auto;讓它居中顯示。接下來我們定義.box元素,它使用絕對定位和transform屬性把自己居中顯示在容器元素的中間。box元素的寬高為100px,背景顏色為#333。同時我們給它定義了一個過渡效果,讓它在0.5秒內緩慢地從原來的狀態過渡到變化后的狀態。
最后是.box:hover的樣式,當鼠標懸停在.box元素上時,它會通過transform屬性把自己放大1.2倍。由于我們已經在.box元素中定義了transform: translate(-50%, -50%);,這里的scale(1.2)只會讓box元素的寬高增加,而不會改變它的位置。
這樣就實現了一個簡單的CSS中心放大動畫效果。
上一篇imgpng php
下一篇css中左浮動居中