CSS_轉場特效(transitions)

本文总阅读量次

使用時機

想在滑鼠移上去的時候做一點效果，希望能讓整個頁面看起來更精緻，為了使畫面在轉場時變得生動，此時就很適合用到有漸變的動畫的transition。例：hover設定浮出來的效果（box shadow）並且變亮。注意：transition需寫在外層裡(尚未觸發前)，而非在hover效果層內。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<section id="video-play">
  <div class="dark-overlay"> <!-- 背景暗色 -->
    <div class="row">
      <div class="col">
        <div class="container p-5"><!-- padding -->
          <a href="#" class="video" data-video="https://www.youtube.com/embed/SjJ08V166uU" data-toggle="modal" data-target="#videoModal">
            <i class="fas fa-play fa-3x"></i><!--data-toggle 通常會伴隨一個icon，告知系統在點擊後會觸發另一個行動 -->
          </a>
          <h1>Watch Our Publicity Film</h1>
        </div>
      </div>
    </div>
  </div>
</section>

進階效果設定

  • box-shadow陰影效果，也能在chrome內建工具進行細部調整
  • filter效果brightness是可以調整亮度
  • transform: scale(1.2) //指定元素由參考點縮放 m 倍

參考網站: filterCSS属性 濾鏡效果製造器