大致排好介紹頁的物件後，現在需要一個按鈕來前往介紹頁，把原本的標語改為按鈕。

<input type="checkbox" id="click-intro" />

<label for="click-intro" class="sub-text"> 標語 </label>

不過當介紹頁出現時，原先的標語會被擋住，所以還需要回到主畫面的按鈕。

<label for="click-intro" class="back"> Back </label>

我希望這個頁面能由下往上滑入，並且隱藏的時候不會拉長畫面，整體基本和選單動畫同理。

#click-intro{
  display: none;
}
#click-intro:checked ~ * .introduce {
  transform: translateY(0%);
  transition-duration: 1.2s;
  transition-timing-function: ease-in-out;
}
#click-intro:not(:checked) ~ * .introduce {
  transform: translateY(100%);
  transition-duration: 1.2s;
  transition-timing-function: ease-in-out;
}

.introduce-w{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.introduce{
  width: 100%;
  height: 100%;
}

雖然這個寫法畫面不會變形，但同樣的，超出畫面的部分會被切掉。

稍微修改一下，讓點擊按鈕進入介紹頁時改變高度。

#click-intro:checked ~ * .introduce {
  height: auto;
}

參考資料/延伸閱讀

1. MDN-height