成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何只用 CSS 完成漂亮的加載

Sanchi / 3444人閱讀

摘要：為什么要做加載只想說本文最重要的是對(duì)偽元素的分享以及讀者對(duì)這些東西的真正掌握我并不是慫恿大家在每一個(gè)頁面的前面都去加一個(gè)酷炫的加載我是如何做的不同的頁面對(duì)加載的設(shè)計(jì)也就可能不同本文設(shè)計(jì)的加載適合大多數(shù)頁面并且本文假設(shè)讀者已經(jīng)非常熟悉偽元素動(dòng)

為什么要做加載

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

我是如何做的

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

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

學(xué)會(huì)使用 CSS 中的 :after 和 :before

keyframe 動(dòng)畫直通車

開始入門

在開始一起構(gòu)建它前, 我們先看看它最后的效果

正如你所看到的, 我們將經(jīng)歷 4 個(gè)步驟

邊框一個(gè)接一個(gè)地出現(xiàn)

紅/橙/白色方塊向里滑入

方塊向外劃出

邊框消失

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

首先, 我們先書寫好基本的 HTML 結(jié)構(gòu)
構(gòu)建 logo 本身

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

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

我們用 less 來實(shí)現(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 的效果圖如下

邊框動(dòng)畫

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

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

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

廢話少說, 就讓我們開始吧, 我們先做出它最初始的樣子. 我們讓 div.logo :: before 絕對(duì)位于 div.logo 的左上角，代表方塊的上邊框和右邊框, 讓 div.logo::after 絕對(duì)定位 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 的第一個(gè)動(dòng)畫

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

隨著我們?cè)谙鄳?yīng)的時(shí)間把邊框從透明變?yōu)?b>黑色, 我們想要的最開始的效果就出來了

該代碼展示了偽元素的初始動(dòng)畫

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%;
  }
}

我們對(duì) div.logo::after 重復(fù)相同的操作, 不要忘了調(diào)整時(shí)間和反轉(zhuǎn) width 和 height. 現(xiàn)在, 我們就有了最外層邊框的整個(gè)動(dòng)畫.

方塊動(dòng)畫

最后，我們一起來設(shè)置方塊的動(dòng)畫

我們最大的挑戰(zhàn)是無法連接 keyframes。因?yàn)椋覀冏罱K想要的動(dòng)畫中每個(gè)小方框都有一定的順序， 為此， 我們作如下改變

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;
  }
}

重復(fù)上面的代碼，就可完成我們整個(gè)動(dòng)畫， 是不是很完美

總結(jié)

感謝你的閱讀，最后附上 所有的源碼，但個(gè)人建議，不要直接閱讀源碼，根據(jù)上面的提示在 codepen 中自己來一遍才是最佳實(shí)踐

原文鏈接: How to create a beautiful animated loader with nothing but CSS (Julien Benchetrit)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112394.html

相關(guān)文章

  • 12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

    摘要：看看這些驚人的純實(shí)驗(yàn)，也許你自己也可以嘗試一下。項(xiàng)目鏈接疊疊高游戲你可以不用來編寫一個(gè)游戲。這個(gè)純粹用實(shí)現(xiàn)的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項(xiàng)目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。 翻譯：瘋狂的技術(shù)宅原文：https://1stwebdesigner.com/12... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮...

    LiuZh 評(píng)論0 收藏0

  • 12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

    摘要：看看這些驚人的純實(shí)驗(yàn)，也許你自己也可以嘗試一下。項(xiàng)目鏈接疊疊高游戲你可以不用來編寫一個(gè)游戲。這個(gè)純粹用實(shí)現(xiàn)的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項(xiàng)目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。 翻譯：瘋狂的技術(shù)宅原文：https://1stwebdesigner.com/12... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮...

    wow_worktile 評(píng)論0 收藏0

  • 12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

    摘要：看看這些驚人的純實(shí)驗(yàn)，也許你自己也可以嘗試一下。項(xiàng)目鏈接疊疊高游戲你可以不用來編寫一個(gè)游戲。這個(gè)純粹用實(shí)現(xiàn)的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項(xiàng)目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。 翻譯：瘋狂的技術(shù)宅原文：https://1stwebdesigner.com/12... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮...

    CastlePeaK 評(píng)論0 收藏0

  • 2017-08-12 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選中的操作符譯理解教程構(gòu)建一個(gè)預(yù)渲染友好的應(yīng)用示例譯如何學(xué)習(xí)開發(fā)如何編寫輕量級(jí)框架中文譯后臺(tái)運(yùn)行實(shí)戰(zhàn)手冊(cè)分析器入門博客眾成翻譯一款簡單到極致的數(shù)據(jù)流框架使用組件的四個(gè)技巧關(guān)鍵請(qǐng)求教程奇舞周刊第期前端路上的旅行如何只用完 2017-08-12 前端日?qǐng)?bào) 精選 JSX中的spread操作符【譯】理解Service WorkerVue.js教程: 構(gòu)建一個(gè)預(yù)渲染SEO友好的應(yīng)用示例...

    zhiwei 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<