色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中心放大動畫

劉姿婷1年前7瀏覽0評論

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中心放大動畫效果。