亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

純 CSS 擼一個漂亮的加載

  發(fā)布時間：2018-09-21 14:49:46   作者：佚名   我要評論
一個頁面想給用戶帶來好的用戶體驗，頁面加載效果非常有必要。這篇文章主要介紹了純 CSS 擼一個漂亮的加載,需要的朋友可以參考下

為什么要做加載

只想說, 本文最重要的是對 CSS, 偽元素, keyframe的分享, 以及讀者對這些東西的真正掌握, 我并不是慫恿大家在每一個頁面的前面都去加一個酷炫的加載

我是如何做的

不同的頁面, 對加載的設計也就可能不同. 本文設計的加載適合大多數(shù)頁面.

并且, 本文假設讀者已經非常熟悉偽元素, CSS 動畫屬性和keyframe, 如果讀者想重溫, 下面兩篇文章可做參考

學會使用 CSS 中的 :after 和 :before
 

keyframe 動畫直通車

開始入門

在開始一起構建它前, 我們先看看它最后的效果

 

正如你所看到的, 我們將經歷 4 個步驟

  • 邊框一個接一個地出現(xiàn)
  • 紅/橙/白色方塊向里滑入
  • 方塊向外劃出
  • 邊框消失

我們只需要 animation-direction: alternate 來完成步驟 1 和 2, 步驟 3 和 步驟 4 我們可以使用 reverse, 另外, 我們可以使用 animation-iteration-count: infinite 重復動畫

首先, 我們先書寫好基本的 HTML 結構

<!doctype html>
<html>
  <head>
    <!-- <link rel="preload"> for CSS, JS, and font files  -->
    <style type="text/css">
      /*
       *  All the CSS for the loader
       *  Minified and vendor prefixed
       */
    </style>
  </head>
  <body>
    <div class="loader">
      <!-- HTML for the loader -->
    </div>
    <header />
    <main />
    <footer />
    <!-- Tags for CSS and JS files -->
  </body>
</html>

 

構建 logo 本身

一開始我們先實現(xiàn) logo 本身, 而不是最終版本的效果

父級元素 logo, 不同顏色的方塊都是它的子元素

<div class="logo">
  <div class="white"></div>
  <div class="orange"></div>
  <div class="red"></div>
</div>

我們用 less 來實現(xiàn)

.logo {
  position: relative;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  box-sizing: border-box;
  background-color: white;
  & > div {
    position: absolute;
  }
  .red {
    top: 0;
    bottom: 0;
    left: 0;
    width: 27%;
    border-right: 4px solid black;
    background-color: #EA5664;
  }
  /* Similar code for div.orange and div.white */
}

 

logo 的效果圖如下

邊框動畫

接下來, 我們將進入棘手(有趣)的部分

CSS 不允許我們直接對 div.logo 的邊框進行設置達到我們想要的效果, 所以我們必須去除原有的邊框, 采用其他的辦法來實現(xiàn)

我們要把四個邊框分割開來, 然后讓它們有序地出現(xiàn), 所以, 我們可以使用覆蓋整個 div 的兩個透明的偽元素

廢話少說, 就讓我們開始吧, 我們先做出它最初始的樣子. 我們讓 div.logo :: before 絕對位于 div.logo 的左上角，代表方塊的上邊框和右邊框
, 讓 div.logo::after 絕對定位 div.logo 的右下角, 代表方塊的下邊框和左邊框

現(xiàn)在, less 代碼變成了這樣

.logo {
  position: relative;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: white;
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid transparent;
  }
  &::before {
    top: 0;
    left: 0;
    border-top-color: black;
    border-right-color: black;
  }
  &::after {
    bottom: 0;
    right: 0;
    border-bottom-color: red; // Red for demo purposes only
    border-left-color: red;
  }
}

 

現(xiàn)在效果長這樣

接下來, 我們就用 keyframe 做 div.logo::before 的第一個動畫

我們將 width 和 height 初始都為 0, 然后用 keyframe 將 width 和
height 調整到 100%

隨著我們在相應的時間把邊框從透明變?yōu)楹谏? 我們想要的最開始的效果就出來了

該代碼展示了偽元素的初始動畫

div.logo {
  &::before,
  &::after {
    /* ... */
    animation-timing-function: linear;
  }
  &::before {
    /* ... */
    animation: border-before 1.5s infinite;
    animation-direction: alternate;
  }
}
@keyframes border-before {
  0% {
    width: 0;
    height: 0;
    border-right-color: transparent;
  }
  24.99% {
    border-right-color: transparent;
  }
  25% {
    height: 0;
    width: 100%;
    border-right-color: black;
  }
  50%,
  100% {
    width: 100%;
    height: 100%;
  }
}

 

我們對 div.logo::after 重復相同的操作, 不要忘了調整時間和反轉 width 和 height. 現(xiàn)在, 我們就有了最外層邊框的整個動畫.

方塊動畫

最后，我們一起來設置方塊的動畫

我們最大的挑戰(zhàn)是無法連接 keyframes。因為，我們最終想要的動畫中每個小方框都有一定的順序， 為此， 我們作如下改變

  • 0 to 25%：上邊框和右邊框顯現(xiàn)
  • 25 to 50%：下邊框和左邊框顯現(xiàn)
  • 50 to 65%：紅色小方塊顯現(xiàn)
  • 65 to 80%：橙色小方塊顯現(xiàn)
  • 75 to 90%：白色小方塊顯現(xiàn)

紅色小方框 keyframe 如下

@keyframes red {
  0%,
  50% {
    width: 0;
    opacity: 0;
  }
  50.01% {
    opacity: 1;
  }
  65%,
  100% {
    width: 27%;
    opacity: 1;
  }
}

重復上面的代碼，就可完成我們整個動畫， 是不是很完美

總結

感謝你的閱讀，最后附上 所有的源碼（http://t.cn/R93jmwe），但個人建議，不要直接閱讀源碼，根據(jù)上面的提示在 codepen 中自己來一遍才是最佳實踐

相關文章

最新評論