#css #flexbox #animation

CSS:利用Flexbox製作好看的Gallery伸縮效果

王淳藝 Celia Wang 2021/09/28 16:57:02
248

在設計網頁時,有時會需要加入圖片集供瀏覽,這時如果想要製作一些特殊的Hover效果,就可以參考利用Flexbox特性做出來的伸縮效果,

讓我們一起來看看吧!

-

STEP 1

首先先建立出圖片集中各個圖片區塊:

<div class="gallery-wrap">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
</div>

 

STEP 2

接著設定CSS樣式,首先是最外層的gallery-wrap:

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

需要先將外層利用display:flex; 變成彈性盒子的屬性,如此一來他的子元素就會變成彈性項目。

而在flex-direction: row的部分,則是宣告他的子元素排列的方向如下:

*圖片擷取自:https://wcc723.github.io/css/2017/07/21/css-flex/*

 

STEP 3

再來設定每個子項目的CSS樣式:

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  
  &:hover{
    flex: 7;
  }
}

在這邊的flex屬性介紹如下:

flex 是縮寫,裡面依序包含三個屬性 flex-growflex-shrink 和 flex-basis,如果只設定一個則是 flex-grow

flex-grow: 元件的伸展性,是一個數值,當空間分配還有剩餘時的當前元件的伸展性,預設值為 0,如果設置為 0 則不會縮放。

flex-shrink: 元件的收縮性: 元件的伸展性,是一個數值,當空間分配還不足時的當前元件的收縮性,預設值為 1,如果設置為 0 則不會縮放。

flex-basis: 元件的基準值,可使用不同的單位值。

*以上介紹擷取自:https://wcc723.github.io/css/2017/07/21/css-flex/*

 

因此flex的數值越大,所佔比例會越多,在此例子中初始狀態皆為flex:1,而當hover時變為flex:7,

 

因此就能創作出hover時彈性伸縮的效果!

 

STEP 4

最後只需要再將個區塊放入喜歡的圖片就完成啦!

.item-1 { 
  background-image: url('...');
}

.item-2 { 
  background-image: url('...');
}

.item-3 { 
  background-image: url('...');
}

.item-4 { 
  background-image: url('...');
}

.item-5 { 
  background-image: url('...');
}

 

完成效果如下:

 

 

參考來源:

https://wcc723.github.io/css/2017/07/21/css-flex/

https://codepen.io/stefcharle/pen/Gydvbx

王淳藝 Celia Wang