首頁 > web前端 > css教學 > 如何使用純CSS實現菱形loader效果(附源碼)

如何使用純CSS實現菱形loader效果(附源碼)

不言
發布: 2018-09-18 17:42:23
原創
1995 人瀏覽過

這篇文章帶給大家的內容是關於如何使用純CSS實現菱形loader效果(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

效果預覽

如何使用純CSS實現菱形loader效果(附源碼)

原始碼下載

https://github.com/comehop​​e/front-end-daily -challenges

程式碼解讀

定義dom,一個容器包含9 個子元素:

1

2

3

4

5

6

7

8

9

10

11

<div>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

</div>

登入後複製

居中顯示:

1

2

3

4

5

6

7

8

body {

  margin: 0;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: black;

}

登入後複製

定義容器和子元素尺寸,是一個大正方形裡包含9 個小正方形:

1

2

3

4

5

6

7

.loader {

    width: 10em;

    height: 10em;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 0.5em;

}

登入後複製

把圖案調整為大菱形中包含9 個小菱形:

1

2

3

.loader {

    transform: rotate(45deg);

}

登入後複製

以垂直的小菱形為單位,為小菱形區塊著色:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

.loader span {

    background-color: var(--c);

}

 

.loader span:nth-child(7) {

    --c: tomato;

}

 

.loader span:nth-child(4),

.loader span:nth-child(8) {

    --c: gold;

}

 

.loader span:nth-child(1),

.loader span:nth-child(5),

.loader span:nth-child(9) {

    --c: limegreen;

}

 

.loader span:nth-child(2),

.loader span:nth-child(6) {

    --c: dodgerblue;

}

 

.loader span:nth-child(3) {

    --c: mediumpurple;

}

登入後複製

定義動畫效果:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.loader span {

    animation: blinking 2s linear infinite;

    animation-delay: var(--d);

    transform: scale(0);

}

 

@keyframes blinking {

    0%, 100% {

        transform: scale(0);

    }

 

    40%, 80% {

        transform: scale(1);

    }

}

登入後複製

最後,為小菱形設定時延,增強動感:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.loader span:nth-child(7) {

    --d: 0s;

}

 

.loader span:nth-child(4),

.loader span:nth-child(8) {

    --d: 0.2s;

}

 

.loader span:nth-child(1),

.loader span:nth-child(5),

.loader span:nth-child(9) {

    --d: 0.4s;

}

 

.loader span:nth-child(2),

.loader span:nth-child(6) {

    --d: 0.6s;

}

 

.loader span:nth-child(3) {

    --d: 0.8s;

}

登入後複製

大功告成!

#

以上是如何使用純CSS實現菱形loader效果(附源碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板