昨天的第三個按鈕動態提案：文章傳送門

使用了CSS動態的動態的主菜——Animation。
其實有很多特效，只要能夠拆解他的原理，就可以使用Animation達成～

譬如說今天完成的打字/換字特效，乍看好像需要JS才能做到
（等到動畫跑完再換文字？還是把三層文字疊在一起？）
但其實只要CSS就可以做到了！

今天主要是跟著這個影片實作的。
在看code之前小小筆記一下CSS的動畫～

CSS 動畫比較不吃效能

CSS 架構的動畫通常是由瀏覽器「主執行緒」的另一獨立執行緒處理；
代表如果瀏覽器在主執行緒上執行某一些高成本任務，CSS 架構的動畫可能會一直運作，而不被中斷。

來源

所以其實可以使用CSS就達成的動態，何樂不為呢？

其實這個動態的組成就是這樣而已：

三個部分

• 靜態的文字（I will help you）
• 動態的文字包（裡面有三段敘述）
• 把靜態動態包起來的容器！

處理：

• 固定容器長寬：不需要的就overflow: hidden，讓畫面看起來只有一行字
• 打字效果：動態文字每一段都做一個偽元素，是一個黑框框，蓋住字，會一直往右移動，讓文字一點一點出現
• 換字效果：讓文字每出現一行之後就往上移動一個單位，就會產生換字效果了～

直接看code &裡面的敘述解釋吧：

上code!

//html
<div class="container">
  <div class="static-text">I will help you </div>
  <div class="dynamic-text-wrapper">
    <div class="dynamic-text">expand your business</div>
    <div class="dynamic-text">find the right customer</div>
    <div class="dynamic-text">level up your brand</div>
  </div>
</div>

//scss
//處理-1：容器和靜態文字的部分 
.container{
  display: flex;
  height: 50px; //
  width: 900px; //這邊我有對最長文字的寬
  overflow: hidden; //把其他不需要的地方隱藏
  position: relative;
}

.static-text{
  white-space: nowrap;//文字讓他不要換行
}

//處理-2：打字效果
.dynamic-text{
  position: relative; //相對於偽元素而言
  height: 50px;
  margin-left: 10px;
  white-space: nowrap;
  font-weight: bold;
  color: #EDDE5D;

  &:before{
    content: '';
    position: absolute;
    border-left: solid 1px  #EDDE5D;
		//border-left 用來做會閃爍的打字線
    width: 100%;
    height: 100%;
    bottom: 0;
    left:0;
    background: black; //偽元素就是一塊黑黑的傢伙把其他字遮起來～
    animation: typewriter 4s steps(23) infinite, 
blink 0.5s steps(23) infinite, 
		//animation一次可以放很多個
		//animation的step就是將想要的效果拆解成幾步驟的意思
		//這邊以最長的文字長度23拆解出來～
		//typewriter 效果就是一直讓黑黑的遮布往右邊移動
		//blink 效果就是讓打字的線|一直閃爍
		
  }
}

@keyframes typewriter{
  40%, 60%{
    left: 100%;
  }
	//40%~60% 讓字固定在最長的長度
  100%{
    left: 0;
  }
	//100% 再讓所有字消失，好像有人在把字刪掉的感覺～
}

@keyframes blink{
  from{border-left: solid 1px  #EDDE5D;}
  to{border-left: solid 1px  transparent;}
}

//處理-3：換字效果

.dynamic-text-wrapper{
  position: relative; //因為要移動
  top: 0px;
  animation: moveup 12s steps(3) infinite,
	//每一行打字設定是4s所以3s需要花費 4*3 =12秒時間移到最後一行
	//因為3行所以這個動畫花steps(3)次解決～
}

@keyframes moveup{
  0%{top:0;}
  100%{top: -150px;}
	//每行高度是50px，要讓最後一行出現就是50px*3行=150px囉～
}

以上！

第一次看到可以換字效果覺得好炫～網路上查了之後才發現只要CSS就可以做到了！
真的是只要有想像力和拆解能力就可以做到很多效果呢～

今天的code 放這裡～

有任何錯誤或意見請批評指教