CSS 按鈕動畫：內三角滑動

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

0 1582

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

一、建立按鈕

　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按鈕動畫_內三角滑動的簡單範例，有興趣也可以試看看。= )