CSS中圖片從中心放大是網站設計中非常重要的一個技巧,可以在頁面美化上起到很大的作用。以下是實現從中心放大的CSS代碼:
.img{ position: relative; display: inline-block; cursor: pointer; /*鼠標放上去變成手型*/ overflow: hidden; /*超出范圍隱藏*/ } .img img{ transition: all 0.5s ease-in-out; /*圖片的過渡效果*/ } .img:after{ content: ''; position: absolute; top: 50%; left: 50%; width: 0; /*寬度為0*/ height: 0; /*高度為0*/ border-radius: 50%; /*變成圓形*/ background-color: rgb(255,255,255,0.8); /*背景顏色,這里設置為半透明白色*/ transform: translate(-50%,-50%); /*向上向左移動50%*/ z-index: 1; /*覆蓋下面的圖片*/ opacity: 0; /*初始透明度為0*/ } .img:hover:after{ width: 200%; /*寬度為原來的兩倍*/ height: 200%; /*高度為原來的兩倍*/ opacity: 1; /*透明度為1,變成不透明*/ transition: all 0.3s ease-in-out; /*過渡時間為0.3秒*/ } .img:hover img{ transform: scale(1.2); /*圖片放大1.2倍*/ }
以上代碼實現了當鼠標放上去的時候,圖片從中心放大,并且在圖片上方出現一個半透明白色的圓形遮罩,給人一種非常時尚的感覺。
使用這個技巧可以讓網站的圖片在視覺上更加突出和吸引人,增加用戶的粘性和留存率。
上一篇css 字體適應分辨率
下一篇css 圖片靠父類右邊