iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

喪屍黑白切系列 第 27

Day 27 | 等待的時間不無聊 - loader

今天想要分享的是這一個 Youtube 影片做出來的等待畫面,
我只有挑他的其中一個寫,
其他可以看他影片做做看。

loader 是個在網頁 render 前的東西,
讓你知道還要等一下,
等動畫結束的時候,就是頁面 loading 好的時候。

本篇關鍵字

  • position: absolute
  • ::after
  • border

範例檔

HTML

<span class="spinner"></span>

CSS

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner{ 
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ddd;
  position: relative;
}

.spinner::after{
  content:'';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  border-color: darkolivegreen transparent;
  animation: rotate .9s infinite linear;
}

@keyframes rotate{
  0% {
    transform: rotate(0deg) scale(1);
  }

  50%{
    transform: rotate(60deg) scale(1.2);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}
  • ::after 設定跟 .spinner 一樣的大小
  • 老樣子用 position: absolute::after 定位到 .spinner
  • 要注意有 border 的話,topleft 要考慮 border 的寬度
  • 設定上下 border 有顏色,左右透明,做出 ( ) 效果(反過來設定也可以啦)
  • 設定 @keyframes 做出轉動有被加速的效果,設定 animation-speed 應該也能達到類似效果

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要來組合畫面囉~


上一篇
Day 26 | 打破規則,勇敢創新 - 破格式設計
下一篇
Day 28 | 來組合個畫面吧 - Part 1
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言