iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

CSS 讓你的網頁動起來系列 第 15

CSS微動畫 - Loading來了!終於要出款文字版本的了!

Q: 說好的文字Loading呢?
A: 客倌這裡上菜囉~

前幾篇的Loading都是以圖案循環為主,今天比較特別要來做文字版本的Loading,文字可以隨著使用者的需求任意改變~本篇一樣當作Loading系列來做介紹,開始吧!

既然是文字,就要來上字啦!

本篇的Loading需要兩個元素,文字相同且有共用的class,並有不同的class可以對文字做樣式的修改。

  1. 首先需要一個.container將文字的元素都包在一起。
  2. 將兩組文字的font-sizefont-weightletter-spacing、均設置相同。
  3. 兩組文字的顏色樣式設置不同。
<style>
  .text {
    white-space: nowrap;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .text-background {
    color: White;
    text-shadow: 0 0 6px #DDA0DD;
  }
  .text-color {
    color: MediumOrchid;
  }
</style>

<div class="container">
  <div class="text text-background">Loading . . .</div>
  <div class="text text-color">Loading . . .</div>
</div>

text two

定位很好用!

再來要將文字重疊,這時候就要用到定位。

<style>
  .container {
    position: relative;
  }
  .text-color {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>

text position

容器給寬度,文字不換行!

再來就要對.text-color設置寬度,希望如果只有width: 50%時,只顯示文字的一半,接下來的設置就很重要了!

  1. 為了達到這個效果,須將.container改為inline-block
  2. .text無論如何死都不換行就要下white-space: nowrap
  3. 最後對.text-color設置寬度,並且要有overflow: hidden把超出容器的都隱藏。
<style>
  .container {
    display: inline-block;
  }
  .text {
    white-space: nowrap;
  }
  .text-color {
    width: 50%;
    overflow: hidden;
  }
</style>

<div class="container">
  <div class="text text-background">Loading . . .</div>
  <div class="text text-color">Loading . . .</div>
</div>

text overflow

再來就可以用animation來做動畫效果

<style>
  .text-color {
    animation: widthChange 3s infinite;
  }

  @keyframes widthChange {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
</style>

text animation

文字Loading完成!

將文字替換掉也是可以的!!

text gogogo
text fight


如果有寫錯的地方,歡迎點評! 會及時改進~
如果有更好的寫法,歡迎指教! 希望各位不吝賜教~
如果想看更多效果,歡迎敲碗! 提供示意圖小編寫寫看~
如果內容疑似侵權,拜託告知! 內容皆為小編理解後原創~
如果對你有點幫助,拿去用吧!


上一篇
CSS微動畫 - Loading來了!時鐘轉轉轉
下一篇
CSS微動畫 - Loading來了!小精靈?這個小傢伙吃蛋
系列文
CSS 讓你的網頁動起來30

尚未有邦友留言

立即登入留言