CSS 按鈕動畫:內三角滑動

Rachel Wen 2020/12/31 13:03:47
40

建立本次的按鈕動畫有三個步驟:「 建立按鈕 」、「 建立按鈕內的二個三角形 」、「 建立按鈕動畫 」

 

一、建立按鈕 

 1. 建立要作業的區塊 div.outside

 2. 建立按鈕 div.btn

 3. 使按鈕置中於畫面:.btn 設定為 inline-block 後就會有 inline 屬性,當父層 .outside 使用文字置中「 text-align: center; 」時,子層 .btn 也會跟著置中

 4. 按鈕內文字置中於按鈕:使用 line-height,設定「 行高 數值與按鈕高度相同

<div class="outside">
  <div class="btn">
    <span>Hover me</span>
  </div>
</div>
body {
  background: #4ce;
}

.outside {
  width: 500px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}

.btn {
  width: 200px;
  height: 70px;
  border: 1px solid #fff;
  display: inline-block;
}

span {
  color: #fff;
  font-size: 20px;
  line-height: 70px;
}

 

 

二、建立按鈕內的二個三角形

 0. 首先,先介紹如何建立三角形:

  當對一個有寬、高的元素設定 border 時,四個邊框的銜接方式是以對角線的形式,如 sample_1;

  而當我們將寬高設定為 0 後,四個邊會在元素的中心匯成一個點,如 sample_2。

  因此,一個三角形將由一個填色的邊線及其相鄰的二個透明邊線所組成,如.box1.box2.box3.box4

   

 1. 建立三角形共用樣式 div.triangle、二個三角形 div.t1、div.t2

 2.定位三角形:

   i. 子層的三角形.triangle 的 position 設定為 absolute,父層 btn 的 position 設定為 relative。 ( 定位相關學習可參考:CSS Position基本觀念 )

   ii. .水平置中:「 left:0; right: 0; margin: auto; 」

   ii. t1 設定 bottom:0,使其置底;.t2 設定 top:0,使其置頂

 3.父層 btn 加上 overflow: hidden,使超出父層的範圍隱藏起來

<div class="outside">
  <div class="btn">
    <span>Hover me</span>
    <div class="triangle t1"></div>
    <div class="triangle t2"></div>
  </div>
</div>
.btn {
  /*...*/
  position: relative;
  overflow: hidden;
}

span {
  color: #fff;
  font-size: 20px;
  line-height: 70px;
}

.triangle {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  opacity: .3;
}

.t1 {
  border-bottom: 120px solid #fff;
  bottom: 0;
}

.t2 {
  border-top: 120px solid #fff;
  top: 0;
}

 

 

三、建立按鈕動畫

 1. 上述呈顯為 hover 後的結果,因此先將 .t1 border-bottom、.t2 border-top的寬度初始為 0

 2. 設定 .btn:hover .t1 的 border-bottom為展開後的 120px、 .btn:hover .t2 的 border-top為展開後的 120px

 3. 增加動畫效果:transition 設定 0.5 秒;當 hover 時,boder 寬度由 0px 到 120px 花費 0.5秒

<div class="outside">
  <div class="btn">
    <span>Hover me</span>
    <div class="triangle t1"></div>
    <div class="triangle t2"></div>
  </div>
</div>
.t1, .t2 {
  /*...*/
  transition: all .5s;
}

.t1 {
  border-bottom: 0px solid #fff;
  bottom: 0;
}

.t2 {
  border-top: 0px solid #fff;
  top: 0;
}

.btn:hover .t1 {
  border-bottom: 120px solid #fff;
}

.btn:hover .t2 {
  border-top: 120px solid #fff;
}

 

 

 

結果呈現

 

  以上就是 CSS按鈕動畫_內三角滑動 的簡單範例,有興趣也可以試看看。= )

 

Rachel Wen