709 lines
22 KiB
HTML
709 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>加载动画预览</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
padding: 40px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
color: #fff;
|
|
}
|
|
|
|
.loader-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.loader-item {
|
|
background: #2a2a2a;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.loader-title {
|
|
font-size: 14px;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
|
|
.loader-wrapper {
|
|
width: 100%;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* 统一的颜色变量 */
|
|
:root {
|
|
--loader-color: #888;
|
|
}
|
|
|
|
/* ========== 0. 方格网格动画 (已有) ========== */
|
|
@keyframes loader_5191 {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.loader-0 {
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.loader-0-square {
|
|
background: var(--loader-color);
|
|
width: 3px;
|
|
height: 3px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -1.5px;
|
|
margin-left: -1.5px;
|
|
border-radius: 0.5px;
|
|
}
|
|
|
|
.loader-0 #sq1 {
|
|
margin-top: -7.5px;
|
|
margin-left: -7.5px;
|
|
animation: loader_5191 675ms ease-in-out 0s infinite alternate;
|
|
}
|
|
|
|
.loader-0 #sq2 {
|
|
margin-top: -7.5px;
|
|
animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
|
|
}
|
|
|
|
.loader-0 #sq3 {
|
|
margin-top: -7.5px;
|
|
margin-left: 4.5px;
|
|
animation: loader_5191 675ms ease-in-out 150ms infinite;
|
|
}
|
|
|
|
.loader-0 #sq4 {
|
|
margin-left: -7.5px;
|
|
animation: loader_5191 675ms ease-in-out 225ms infinite;
|
|
}
|
|
|
|
.loader-0 #sq5 {
|
|
animation: loader_5191 675ms ease-in-out 300ms infinite;
|
|
}
|
|
|
|
.loader-0 #sq6 {
|
|
margin-left: 4.5px;
|
|
animation: loader_5191 675ms ease-in-out 375ms infinite;
|
|
}
|
|
|
|
.loader-0 #sq7 {
|
|
margin-top: 4.5px;
|
|
margin-left: -7.5px;
|
|
animation: loader_5191 675ms ease-in-out 450ms infinite;
|
|
}
|
|
|
|
.loader-0 #sq8 {
|
|
margin-top: 4.5px;
|
|
animation: loader_5191 675ms ease-in-out 525ms infinite;
|
|
}
|
|
|
|
.loader-0 #sq9 {
|
|
margin-top: 4.5px;
|
|
margin-left: 4.5px;
|
|
animation: loader_5191 675ms ease-in-out 600ms infinite;
|
|
}
|
|
|
|
/* ========== 1. 方块旋转动画 ========== */
|
|
@keyframes square-animation {
|
|
0% { left: 0; top: 0; }
|
|
10.5% { left: 0; top: 0; }
|
|
12.5% { left: 16px; top: 0; }
|
|
23% { left: 16px; top: 0; }
|
|
25% { left: 32px; top: 0; }
|
|
35.5% { left: 32px; top: 0; }
|
|
37.5% { left: 32px; top: 16px; }
|
|
48% { left: 32px; top: 16px; }
|
|
50% { left: 16px; top: 16px; }
|
|
60.5% { left: 16px; top: 16px; }
|
|
62.5% { left: 16px; top: 32px; }
|
|
73% { left: 16px; top: 32px; }
|
|
75% { left: 0; top: 32px; }
|
|
85.5% { left: 0; top: 32px; }
|
|
87.5% { left: 0; top: 16px; }
|
|
98% { left: 0; top: 16px; }
|
|
100% { left: 0; top: 0; }
|
|
}
|
|
|
|
.loader-1 {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.loader-1-square {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin: 1px;
|
|
background: var(--loader-color);
|
|
animation: square-animation 10s ease-in-out infinite both;
|
|
}
|
|
|
|
.loader-1-square:nth-of-type(1) { animation-delay: -1.4285714286s; }
|
|
.loader-1-square:nth-of-type(2) { animation-delay: -2.8571428571s; }
|
|
.loader-1-square:nth-of-type(3) { animation-delay: -4.2857142857s; }
|
|
.loader-1-square:nth-of-type(4) { animation-delay: -5.7142857143s; }
|
|
.loader-1-square:nth-of-type(5) { animation-delay: -7.1428571429s; }
|
|
.loader-1-square:nth-of-type(6) { animation-delay: -8.5714285714s; }
|
|
.loader-1-square:nth-of-type(7) { animation-delay: -10s; }
|
|
|
|
/* ========== 2. 双方块追逐 ========== */
|
|
.loader-2 {
|
|
--size: 15px;
|
|
width: 50px;
|
|
height: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.loader-2::after,
|
|
.loader-2::before {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
content: "";
|
|
width: var(--size);
|
|
height: var(--size);
|
|
top: 50%;
|
|
animation: loader-2-up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
|
|
left: 50%;
|
|
background: var(--loader-color);
|
|
}
|
|
|
|
.loader-2::after {
|
|
top: calc(50% - var(--size));
|
|
left: calc(50% - var(--size));
|
|
animation: loader-2-down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
|
|
}
|
|
|
|
@keyframes loader-2-down {
|
|
0%, 100% { transform: none; }
|
|
25% { transform: translateX(100%); }
|
|
50% { transform: translateX(100%) translateY(100%); }
|
|
75% { transform: translateY(100%); }
|
|
}
|
|
|
|
@keyframes loader-2-up {
|
|
0%, 100% { transform: none; }
|
|
25% { transform: translateX(-100%); }
|
|
50% { transform: translateX(-100%) translateY(-100%); }
|
|
75% { transform: translateY(-100%); }
|
|
}
|
|
|
|
/* ========== 3. 弹跳方块 ========== */
|
|
.loader-3 {
|
|
width: 60px;
|
|
height: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.loader-3-square {
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
background-color: var(--loader-color);
|
|
left: 15%;
|
|
transform-origin: 50%;
|
|
animation: loader-3-bounce .5s alternate infinite ease;
|
|
}
|
|
|
|
@keyframes loader-3-bounce {
|
|
0% {
|
|
top: 30px;
|
|
height: 5px;
|
|
transform: scaleX(1.7);
|
|
}
|
|
40% {
|
|
height: 10px;
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
top: 0%;
|
|
}
|
|
}
|
|
|
|
.loader-3-square:nth-child(2) {
|
|
left: 45%;
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
.loader-3-square:nth-child(3) {
|
|
left: auto;
|
|
right: 15%;
|
|
animation-delay: .3s;
|
|
}
|
|
|
|
/* ========== 4. 五方块序列 ========== */
|
|
.loader-4 {
|
|
--square: 13px;
|
|
--offset: 15px;
|
|
--duration: 2.4s;
|
|
--delay: 0.2s;
|
|
width: calc(3 * var(--offset) + var(--square));
|
|
height: calc(2 * var(--offset) + var(--square));
|
|
position: relative;
|
|
}
|
|
|
|
.loader-4 div {
|
|
display: inline-block;
|
|
background: var(--loader-color);
|
|
border: none;
|
|
width: var(--square);
|
|
height: var(--square);
|
|
position: absolute;
|
|
}
|
|
|
|
.loader-4 #sq1 {
|
|
left: calc(0 * var(--offset));
|
|
top: calc(0 * var(--offset));
|
|
animation: loader-4-square1 var(--duration) var(--delay) ease-in-out infinite;
|
|
}
|
|
|
|
.loader-4 #sq2 {
|
|
left: calc(0 * var(--offset));
|
|
top: calc(1 * var(--offset));
|
|
animation: loader-4-square2 var(--duration) var(--delay) ease-in-out infinite;
|
|
}
|
|
|
|
.loader-4 #sq3 {
|
|
left: calc(1 * var(--offset));
|
|
top: calc(1 * var(--offset));
|
|
animation: loader-4-square3 var(--duration) var(--delay) ease-in-out infinite;
|
|
}
|
|
|
|
.loader-4 #sq4 {
|
|
left: calc(2 * var(--offset));
|
|
top: calc(1 * var(--offset));
|
|
animation: loader-4-square4 var(--duration) var(--delay) ease-in-out infinite;
|
|
}
|
|
|
|
.loader-4 #sq5 {
|
|
left: calc(3 * var(--offset));
|
|
top: calc(1 * var(--offset));
|
|
animation: loader-4-square5 var(--duration) var(--delay) ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes loader-4-square1 {
|
|
0% { left: calc(0 * var(--offset)); top: calc(0 * var(--offset)); }
|
|
8.333% { left: calc(0 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
100% { left: calc(0 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
}
|
|
|
|
@keyframes loader-4-square2 {
|
|
0% { left: calc(0 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
8.333% { left: calc(0 * var(--offset)); top: calc(2 * var(--offset)); }
|
|
16.67% { left: calc(1 * var(--offset)); top: calc(2 * var(--offset)); }
|
|
25.00% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
83.33% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
91.67% { left: calc(1 * var(--offset)); top: calc(0 * var(--offset)); }
|
|
100% { left: calc(0 * var(--offset)); top: calc(0 * var(--offset)); }
|
|
}
|
|
|
|
@keyframes loader-4-square3 {
|
|
0%, 100% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
16.67% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
25.00% { left: calc(1 * var(--offset)); top: calc(0 * var(--offset)); }
|
|
33.33% { left: calc(2 * var(--offset)); top: calc(0 * var(--offset)); }
|
|
41.67% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
66.67% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
75.00% { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
|
|
83.33% { left: calc(1 * var(--offset)); top: calc(2 * var(--offset)); }
|
|
91.67% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
}
|
|
|
|
@keyframes loader-4-square4 {
|
|
0% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
33.33% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
41.67% { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
|
|
50.00% { left: calc(3 * var(--offset)); top: calc(2 * var(--offset)); }
|
|
58.33% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
100% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
}
|
|
|
|
@keyframes loader-4-square5 {
|
|
0% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
50.00% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
58.33% { left: calc(3 * var(--offset)); top: calc(0 * var(--offset)); }
|
|
66.67% { left: calc(2 * var(--offset)); top: calc(0 * var(--offset)); }
|
|
75.00% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
100% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
|
}
|
|
|
|
/* ========== 5. 九宫格动画 ========== */
|
|
.loader-5 {
|
|
position: relative;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.loader-5-box {
|
|
float: left;
|
|
position: relative;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.loader-5-box:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--loader-color);
|
|
}
|
|
|
|
.loader-5-box:nth-child(3n) {
|
|
margin-right: 0;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.loader-5-box:nth-child(1):before,
|
|
.loader-5-box:nth-child(4):before {
|
|
margin-left: 13px;
|
|
}
|
|
|
|
.loader-5-box:nth-child(3):before {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.loader-5-box:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.loader-5-box:nth-child(1) { animation: loader-5-moveBox-1 4s infinite; }
|
|
.loader-5-box:nth-child(2) { animation: loader-5-moveBox-2 4s infinite; }
|
|
.loader-5-box:nth-child(3) { animation: loader-5-moveBox-3 4s infinite; }
|
|
.loader-5-box:nth-child(4) { animation: loader-5-moveBox-4 4s infinite; }
|
|
.loader-5-box:nth-child(5) { animation: loader-5-moveBox-5 4s infinite; }
|
|
.loader-5-box:nth-child(6) { animation: loader-5-moveBox-6 4s infinite; }
|
|
.loader-5-box:nth-child(7) { animation: loader-5-moveBox-7 4s infinite; }
|
|
.loader-5-box:nth-child(8) { animation: loader-5-moveBox-8 4s infinite; }
|
|
.loader-5-box:nth-child(9) { animation: loader-5-moveBox-9 4s infinite; }
|
|
|
|
@keyframes loader-5-moveBox-1 {
|
|
9.09% { transform: translate(-13px, 0); }
|
|
18.18% { transform: translate(0px, 0); }
|
|
27.27% { transform: translate(0px, 0); }
|
|
36.36% { transform: translate(13px, 0); }
|
|
45.45% { transform: translate(13px, 13px); }
|
|
54.55% { transform: translate(13px, 13px); }
|
|
63.64% { transform: translate(13px, 13px); }
|
|
72.73% { transform: translate(13px, 0px); }
|
|
81.82% { transform: translate(0px, 0px); }
|
|
90.91% { transform: translate(-13px, 0px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-2 {
|
|
9.09% { transform: translate(0, 0); }
|
|
18.18% { transform: translate(13px, 0); }
|
|
27.27% { transform: translate(0px, 0); }
|
|
36.36% { transform: translate(13px, 0); }
|
|
45.45% { transform: translate(13px, 13px); }
|
|
54.55% { transform: translate(13px, 13px); }
|
|
63.64% { transform: translate(13px, 13px); }
|
|
72.73% { transform: translate(13px, 13px); }
|
|
81.82% { transform: translate(0px, 13px); }
|
|
90.91% { transform: translate(0px, 13px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-3 {
|
|
9.09% { transform: translate(-13px, 0); }
|
|
18.18% { transform: translate(-13px, 0); }
|
|
27.27% { transform: translate(0px, 0); }
|
|
36.36% { transform: translate(-13px, 0); }
|
|
45.45% { transform: translate(-13px, 0); }
|
|
54.55% { transform: translate(-13px, 0); }
|
|
63.64% { transform: translate(-13px, 0); }
|
|
72.73% { transform: translate(-13px, 0); }
|
|
81.82% { transform: translate(-13px, -13px); }
|
|
90.91% { transform: translate(0px, -13px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-4 {
|
|
9.09% { transform: translate(-13px, 0); }
|
|
18.18% { transform: translate(-13px, 0); }
|
|
27.27% { transform: translate(-13px, -13px); }
|
|
36.36% { transform: translate(0px, -13px); }
|
|
45.45% { transform: translate(0px, 0px); }
|
|
54.55% { transform: translate(0px, -13px); }
|
|
63.64% { transform: translate(0px, -13px); }
|
|
72.73% { transform: translate(0px, -13px); }
|
|
81.82% { transform: translate(-13px, -13px); }
|
|
90.91% { transform: translate(-13px, 0px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-5 {
|
|
9.09% { transform: translate(0, 0); }
|
|
18.18% { transform: translate(0, 0); }
|
|
27.27% { transform: translate(0, 0); }
|
|
36.36% { transform: translate(13px, 0); }
|
|
45.45% { transform: translate(13px, 0); }
|
|
54.55% { transform: translate(13px, 0); }
|
|
63.64% { transform: translate(13px, 0); }
|
|
72.73% { transform: translate(13px, 0); }
|
|
81.82% { transform: translate(13px, -13px); }
|
|
90.91% { transform: translate(0px, -13px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-6 {
|
|
9.09% { transform: translate(0, 0); }
|
|
18.18% { transform: translate(-13px, 0); }
|
|
27.27% { transform: translate(-13px, 0); }
|
|
36.36% { transform: translate(0px, 0); }
|
|
45.45% { transform: translate(0px, 0); }
|
|
54.55% { transform: translate(0px, 0); }
|
|
63.64% { transform: translate(0px, 0); }
|
|
72.73% { transform: translate(0px, 13px); }
|
|
81.82% { transform: translate(-13px, 13px); }
|
|
90.91% { transform: translate(-13px, 0px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-7 {
|
|
9.09% { transform: translate(13px, 0); }
|
|
18.18% { transform: translate(13px, 0); }
|
|
27.27% { transform: translate(13px, 0); }
|
|
36.36% { transform: translate(0px, 0); }
|
|
45.45% { transform: translate(0px, -13px); }
|
|
54.55% { transform: translate(13px, -13px); }
|
|
63.64% { transform: translate(0px, -13px); }
|
|
72.73% { transform: translate(0px, -13px); }
|
|
81.82% { transform: translate(0px, 0px); }
|
|
90.91% { transform: translate(13px, 0px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-8 {
|
|
9.09% { transform: translate(0, 0); }
|
|
18.18% { transform: translate(-13px, 0); }
|
|
27.27% { transform: translate(-13px, -13px); }
|
|
36.36% { transform: translate(0px, -13px); }
|
|
45.45% { transform: translate(0px, -13px); }
|
|
54.55% { transform: translate(0px, -13px); }
|
|
63.64% { transform: translate(0px, -13px); }
|
|
72.73% { transform: translate(0px, -13px); }
|
|
81.82% { transform: translate(13px, -13px); }
|
|
90.91% { transform: translate(13px, 0px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
@keyframes loader-5-moveBox-9 {
|
|
9.09% { transform: translate(-13px, 0); }
|
|
18.18% { transform: translate(-13px, 0); }
|
|
27.27% { transform: translate(0px, 0); }
|
|
36.36% { transform: translate(-13px, 0); }
|
|
45.45% { transform: translate(0px, 0); }
|
|
54.55% { transform: translate(0px, 0); }
|
|
63.64% { transform: translate(-13px, 0); }
|
|
72.73% { transform: translate(-13px, 0); }
|
|
81.82% { transform: translate(-26px, 0); }
|
|
90.91% { transform: translate(-13px, 0); }
|
|
100% { transform: translate(0px, 0); }
|
|
}
|
|
|
|
/* ========== 6. 波纹方块 ========== */
|
|
.loader-6 {
|
|
--cell-size: 10px;
|
|
--cell-spacing: 1px;
|
|
--cells: 3;
|
|
--total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: var(--total-size);
|
|
height: var(--total-size);
|
|
}
|
|
|
|
.loader-6-cell {
|
|
flex: 0 0 var(--cell-size);
|
|
margin: var(--cell-spacing);
|
|
background-color: transparent;
|
|
box-sizing: border-box;
|
|
animation: 1.5s loader-6-ripple ease infinite;
|
|
}
|
|
|
|
.loader-6-cell.d-1 { animation-delay: 100ms; }
|
|
.loader-6-cell.d-2 { animation-delay: 200ms; }
|
|
.loader-6-cell.d-3 { animation-delay: 300ms; }
|
|
.loader-6-cell.d-4 { animation-delay: 400ms; }
|
|
|
|
.loader-6-cell:nth-child(1),
|
|
.loader-6-cell:nth-child(2),
|
|
.loader-6-cell:nth-child(3),
|
|
.loader-6-cell:nth-child(4),
|
|
.loader-6-cell:nth-child(5),
|
|
.loader-6-cell:nth-child(6),
|
|
.loader-6-cell:nth-child(7),
|
|
.loader-6-cell:nth-child(8),
|
|
.loader-6-cell:nth-child(9) {
|
|
--cell-color: var(--loader-color);
|
|
}
|
|
|
|
@keyframes loader-6-ripple {
|
|
0% { background-color: transparent; }
|
|
30% { background-color: var(--cell-color); }
|
|
60% { background-color: transparent; }
|
|
100% { background-color: transparent; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>加载动画预览 - 统一风格</h1>
|
|
|
|
<div class="loader-grid">
|
|
<!-- 0. 方格网格 (已有) -->
|
|
<div class="loader-item">
|
|
<div class="loader-wrapper">
|
|
<div class="loader-0">
|
|
<div class="loader-0-square" id="sq1"></div>
|
|
<div class="loader-0-square" id="sq2"></div>
|
|
<div class="loader-0-square" id="sq3"></div>
|
|
<div class="loader-0-square" id="sq4"></div>
|
|
<div class="loader-0-square" id="sq5"></div>
|
|
<div class="loader-0-square" id="sq6"></div>
|
|
<div class="loader-0-square" id="sq7"></div>
|
|
<div class="loader-0-square" id="sq8"></div>
|
|
<div class="loader-0-square" id="sq9"></div>
|
|
</div>
|
|
</div>
|
|
<div class="loader-title">0. 方格网格 (已有)</div>
|
|
</div>
|
|
|
|
<!-- 1. 方块旋转 -->
|
|
<div class="loader-item">
|
|
<div class="loader-wrapper">
|
|
<div class="loader-1">
|
|
<div class="loader-1-square"></div>
|
|
<div class="loader-1-square"></div>
|
|
<div class="loader-1-square"></div>
|
|
<div class="loader-1-square"></div>
|
|
<div class="loader-1-square"></div>
|
|
<div class="loader-1-square"></div>
|
|
<div class="loader-1-square"></div>
|
|
</div>
|
|
</div>
|
|
<div class="loader-title">1. 方块旋转</div>
|
|
</div>
|
|
|
|
<!-- 2. 双方块追逐 -->
|
|
<div class="loader-item">
|
|
<div class="loader-wrapper">
|
|
<div class="loader-2"></div>
|
|
</div>
|
|
<div class="loader-title">2. 双方块追逐</div>
|
|
</div>
|
|
|
|
<!-- 3. 弹跳方块 -->
|
|
<div class="loader-item">
|
|
<div class="loader-wrapper">
|
|
<div class="loader-3">
|
|
<div class="loader-3-square"></div>
|
|
<div class="loader-3-square"></div>
|
|
<div class="loader-3-square"></div>
|
|
</div>
|
|
</div>
|
|
<div class="loader-title">3. 弹跳方块</div>
|
|
</div>
|
|
|
|
<!-- 4. 五方块序列 -->
|
|
<div class="loader-item">
|
|
<div class="loader-wrapper">
|
|
<div class="loader-4">
|
|
<div id="sq1"></div>
|
|
<div id="sq2"></div>
|
|
<div id="sq3"></div>
|
|
<div id="sq4"></div>
|
|
<div id="sq5"></div>
|
|
</div>
|
|
</div>
|
|
<div class="loader-title">4. 五方块序列</div>
|
|
</div>
|
|
|
|
<!-- 5. 九宫格动画 -->
|
|
<div class="loader-item">
|
|
<div class="loader-wrapper">
|
|
<div class="loader-5">
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
<div class="loader-5-box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="loader-title">5. 九宫格动画</div>
|
|
</div>
|
|
|
|
<!-- 6. 波纹方块 -->
|
|
<div class="loader-item">
|
|
<div class="loader-wrapper">
|
|
<div class="loader-6">
|
|
<div class="loader-6-cell d-0"></div>
|
|
<div class="loader-6-cell d-1"></div>
|
|
<div class="loader-6-cell d-2"></div>
|
|
<div class="loader-6-cell d-1"></div>
|
|
<div class="loader-6-cell d-2"></div>
|
|
<div class="loader-6-cell d-2"></div>
|
|
<div class="loader-6-cell d-3"></div>
|
|
<div class="loader-6-cell d-3"></div>
|
|
<div class="loader-6-cell d-4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="loader-title">6. 波纹方块</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|