Loading 动画 - 果冻，HTML/Vue代码在线实时编辑、预览

            
                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

            
            /* 设置页面基本样式，使内容居中显示 */
body {
    background: #282c34;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    /* 定义CSS变量 */
    --uib-size: 40px;        /* 控制动画大小 */
    --uib-color: #c7f93e;      /* 控制动画颜色 */
    --uib-speed: .9s;        /* 控制动画速度 */
    position: relative;
    height: calc(var(--uib-size) / 2);
    width: var(--uib-size);
    filter: url('#uib-jelly-ooze');  /* 应用果冻效果滤镜 */
    animation: rotate calc(var(--uib-speed) * 2) linear infinite;
    will-change: transform;
}

/* 使用伪元素创建两个圆形 */
.container::before,
.container::after {
    content: '';
    position: absolute;
    top: 0%;
    left: 25%;
    width: 50%;
    height: 100%;
    background-color: var(--uib-color);
    border-radius: 100%;
    will-change: transform;
    transition: background-color 0.3s ease;
}

/* 左侧圆形的动画 */
.container::before {
    animation: shift-left var(--uib-speed) ease infinite;
}

/* 右侧圆形的动画 */
.container::after {
    animation: shift-right var(--uib-speed) ease infinite;
}

/* 隐藏SVG元素 */
.svg {
    width: 0;
    height: 0;
    position: absolute;
}

/* 旋转动画关键帧 */
@keyframes rotate {
    0%, 49.999%, 100% {
        transform: none;
    }
    50%, 99.999% {
        transform: rotate(90deg);
    }
}

/* 左移动画关键帧 */
@keyframes shift-left {
    0%, 100% {
        transform: translateX(0%);
    }
    50% {
        transform: scale(0.65) translateX(-75%);
    }
}

/* 右移动画关键帧 */
@keyframes shift-right {
    0%, 100% {
        transform: translateX(0%);
    }
    50% {
        transform: scale(0.65) translateX(75%);
    }
}