Rumah > hujung hadapan web > tutorial css > 超酷CSS3 loading加载动画特效

超酷CSS3 loading加载动画特效

黄舟
Lepaskan: 2017-01-19 14:05:57
asal
1999 orang telah melayarinya

简要教程

这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作,它代码简单,效果非常的炫酷。

 使用方法

 HTML结构

使用一个

元素作为该loading动画的容器,里面有两个子元素。其中div.loading-1是loading进度条。div.loading-2是loading文字。

1

2

3

4

<div class="loader">

    <div class="loading-1"></div>

    <div class="loading-2">Loading...</div>

</div>

Salin selepas log masuk

CSS样式

该loading动画中使用了3个animation动画,第一个load动画是用于进度条从0运动到100%。第二个turn动画用于进度条在Y轴方向上旋转。第三个bounce动画用于文字的弹跳。

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

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

.loader {

    width: 150px;

    margin: 50px auto 70px;

    position: relative;

}

.loader .loading-1 {

    position: relative;

    width: 100%;

    height: 10px;

    border: 1px solid #69d2e7;

    border-radius: 10px;

    animation: turn 4s linear 1.75s infinite;

}

.loader .loading-1:before {

    content: "";

    display: block;

    position: absolute;

    width: 0%;

    height: 100%;

    background: #69d2e7;

    box-shadow: 10px 0px 15px 0px #69d2e7;

    animation: load 2s linear infinite;

}

.loader .loading-2 {

    width: 100%;

    position: absolute;

    top: 10px;

    color: #69d2e7;

    font-size: 22px;

    text-align: center;

    animation: bounce 2s  linear infinite;

}

@keyframes load {

    0% {

        width: 0%;

    }

    87.5%, 100% {

        width: 100%;

    }

}

@keyframes turn {

    0% {

        transform: rotateY(0deg);

    }

    6.25%, 50% {

        transform: rotateY(180deg);

    }

    56.25%, 100% {

        transform: rotateY(360deg);

    }

}

@keyframes bounce {

    0%,100% {

        top: 10px;

    }

    12.5% {

        top: 30px;

    }

}

Salin selepas log masuk

以上就是超酷CSS3 loading加载动画特效的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan