css3绘制一个圆圆的loading转圈动画实例分享


当前第2页 返回上一页

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

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

$width: 64px;

$height: 64px;

$dotWidth: 10px;

$dotHeight: 10px;

$radius: 5px;

$offset: 9.37px;

 

@function getLeft( $x ) {

  @return ($width/4)*$x;

}

 

@function getTop( $y ) {

  @return ($height/4)*$y;

}

 

@keyframes changeOpacity {

    from { opacity: 1; }

    to { opacity: .2; }

}

 

.q-loading {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    .q-loading-overlay {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background-color: rgba(255, 255, 255, .5); 

    }

    .q-loading-content {

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

        width: $width;

        height: $height;

        z-index: 2;

    }

    .dot {

        width: 10px;

        height: 10px;

        position: absolute;

        background-color: #0033cc;

        border-radius: 50% 50%;

        opacity: 1;

        animation: changeOpacity 1.04s ease infinite;

    }

    .dot1 {

        left: 0;

        top: 50%;

        margin-top: -$radius;

        animation-delay: 0.13s;

    }

    .dot2 {

        left: $offset;

        top: $offset;

        animation-delay: 0.26s;

    }

    .dot3 {

        left: 50%;

        top: 0;

        margin-left: -$radius;

        animation-delay: 0.39s;

    }

    .dot4 {

        top: $offset;

        right: $offset;

        animation-delay: 0.52s;

    }

    .dot5 {

        right: 0;

        top: 50%;

        margin-top: -$radius;

        animation-delay: 0.65s;

    }

    .dot6 {

        right: $offset;

        bottom: $offset;

        animation-delay: 0.78s;

    }

    .dot7 {

        bottom: 0;

        left: 50%;

        margin-left: -$radius;

        animation-delay: 0.91s;

    }

    .dot8 {

        bottom: $offset;

        left: $offset;

        animation-delay: 1.04s;

    }

}

代码使用scss定义了大圆和小圆圈的半径,不管改成多大只需要更改变量,下面样式无需改变。

通过这个公式计算的看起来就很像圆形了

3.动画时间设置

假设动画持续时间为 t, 圆圈个数为 c, 某个小圆圈的位置为 i (比如上面 i 取 1~8),那么小圈相继启动的时间为 i * t/c

相关推荐:

图片懒加载imgLazyLoading.js详解

巧用ajax请求服务器加载数据列表时提示loading的方法

微信小程序loading组件如何载入动画方法教程

以上就是css3绘制一个圆圆的loading转圈动画实例分享的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

border-radius属性如何使用

css3可以做什么

css3新增伪类有哪些

text-emphasis属性有什么用

css <basic-shape>的基本形状函数有哪些?如何使用?

css权重是什么?css权重的介绍

html5、css实现文字阴影效果实例分享

聊聊你可能不了解的css属性函数 attr()

css3 skew()属性怎么用

animation-play-state属性怎么用

更多相关阅读请进入《loading》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...