337 lines
29 KiB
HTML
337 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>加载动画预览 V2</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: 1400px; margin: 0 auto; }
|
|
h1 { text-align: center; margin-bottom: 40px; color: #fff; }
|
|
.loader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; }
|
|
.loader-item { background: #2a2a2a; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
|
|
.loader-title { font-size: 13px; color: #999; text-align: center; }
|
|
.loader-wrapper { width: 100%; height: 60px; 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 sq-anim-1 { 0% { left: 0; top: 0; } 10.5% { left: 0; top: 0; } 12.5% { left: 8px; top: 0; } 23% { left: 8px; top: 0; } 25% { left: 16px; top: 0; } 35.5% { left: 16px; top: 0; } 37.5% { left: 16px; top: 8px; } 48% { left: 16px; top: 8px; } 50% { left: 8px; top: 8px; } 60.5% { left: 8px; top: 8px; } 62.5% { left: 8px; top: 16px; } 73% { left: 8px; top: 16px; } 75% { left: 0; top: 16px; } 85.5% { left: 0; top: 16px; } 87.5% { left: 0; top: 8px; } 98% { left: 0; top: 8px; } 100% { left: 0; top: 0; } }
|
|
.loader-1 { position: relative; width: 24px; height: 24px; transform: rotate(45deg); }
|
|
.loader-1-square { position: absolute; top: 0; left: 0; width: 3px; height: 3px; margin: 0.5px; background: var(--loader-color); animation: sq-anim-1 10s ease-in-out infinite both; }
|
|
.loader-1-square:nth-of-type(1) { animation-delay: -1.43s; }
|
|
.loader-1-square:nth-of-type(2) { animation-delay: -2.86s; }
|
|
.loader-1-square:nth-of-type(3) { animation-delay: -4.29s; }
|
|
.loader-1-square:nth-of-type(4) { animation-delay: -5.71s; }
|
|
.loader-1-square:nth-of-type(5) { animation-delay: -7.14s; }
|
|
.loader-1-square:nth-of-type(6) { animation-delay: -8.57s; }
|
|
.loader-1-square:nth-of-type(7) { animation-delay: -10s; }
|
|
|
|
/* 2. 双方块 */
|
|
.loader-2 { --size: 6px; width: 16px; height: 16px; position: relative; }
|
|
.loader-2::after, .loader-2::before { box-sizing: border-box; position: absolute; content: ""; width: var(--size); height: var(--size); top: 50%; animation: l2-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: l2-down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; }
|
|
@keyframes l2-down { 0%, 100% { transform: none; } 25% { transform: translateX(100%); } 50% { transform: translateX(100%) translateY(100%); } 75% { transform: translateY(100%); } }
|
|
@keyframes l2-up { 0%, 100% { transform: none; } 25% { transform: translateX(-100%); } 50% { transform: translateX(-100%) translateY(-100%); } 75% { transform: translateY(-100%); } }
|
|
|
|
/* 3. 弹跳 */
|
|
.loader-3 { width: 40px; height: 20px; position: relative; }
|
|
.loader-3-square { width: 3px; height: 3px; position: absolute; background-color: var(--loader-color); left: 15%; transform-origin: 50%; animation: l3-bounce .5s alternate infinite ease; }
|
|
@keyframes l3-bounce { 0% { top: 20px; height: 2px; transform: scaleX(1.7); } 40% { height: 3px; 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 { --sq: 3px; --off: 7.5px; width: calc(3 * var(--off) + var(--sq)); height: calc(2 * var(--off) + var(--sq)); position: relative; }
|
|
.loader-4 div { display: inline-block; background: var(--loader-color); width: var(--sq); height: var(--sq); position: absolute; }
|
|
.loader-4 #s1 { left: 0; top: 0; animation: l4-s1 2.4s 0.2s ease-in-out infinite; }
|
|
.loader-4 #s2 { left: 0; top: var(--off); animation: l4-s2 2.4s 0.2s ease-in-out infinite; }
|
|
.loader-4 #s3 { left: var(--off); top: var(--off); animation: l4-s3 2.4s 0.2s ease-in-out infinite; }
|
|
.loader-4 #s4 { left: calc(2 * var(--off)); top: var(--off); animation: l4-s4 2.4s 0.2s ease-in-out infinite; }
|
|
.loader-4 #s5 { left: calc(3 * var(--off)); top: var(--off); animation: l4-s5 2.4s 0.2s ease-in-out infinite; }
|
|
@keyframes l4-s1 { 0% { left: 0; top: 0; } 8.33% { left: 0; top: var(--off); } 100% { left: 0; top: var(--off); } }
|
|
@keyframes l4-s2 { 0% { left: 0; top: var(--off); } 8.33% { left: 0; top: calc(2 * var(--off)); } 16.67% { left: var(--off); top: calc(2 * var(--off)); } 25% { left: var(--off); top: var(--off); } 83.33% { left: var(--off); top: var(--off); } 91.67% { left: var(--off); top: 0; } 100% { left: 0; top: 0; } }
|
|
@keyframes l4-s3 { 0%, 100% { left: var(--off); top: var(--off); } 16.67% { left: var(--off); top: var(--off); } 25% { left: var(--off); top: 0; } 33.33% { left: calc(2 * var(--off)); top: 0; } 41.67% { left: calc(2 * var(--off)); top: var(--off); } 66.67% { left: calc(2 * var(--off)); top: var(--off); } 75% { left: calc(2 * var(--off)); top: calc(2 * var(--off)); } 83.33% { left: var(--off); top: calc(2 * var(--off)); } 91.67% { left: var(--off); top: var(--off); } }
|
|
@keyframes l4-s4 { 0% { left: calc(2 * var(--off)); top: var(--off); } 33.33% { left: calc(2 * var(--off)); top: var(--off); } 41.67% { left: calc(2 * var(--off)); top: calc(2 * var(--off)); } 50% { left: calc(3 * var(--off)); top: calc(2 * var(--off)); } 58.33% { left: calc(3 * var(--off)); top: var(--off); } 100% { left: calc(3 * var(--off)); top: var(--off); } }
|
|
@keyframes l4-s5 { 0% { left: calc(3 * var(--off)); top: var(--off); } 50% { left: calc(3 * var(--off)); top: var(--off); } 58.33% { left: calc(3 * var(--off)); top: 0; } 66.67% { left: calc(2 * var(--off)); top: 0; } 75% { left: calc(2 * var(--off)); top: var(--off); } 100% { left: calc(2 * var(--off)); top: var(--off); } }
|
|
|
|
/* 5. 九宫格 */
|
|
.loader-5 { position: relative; width: 20px; height: 20px; }
|
|
.loader-5-box { float: left; position: relative; width: 3px; height: 3px; margin-right: 4px; }
|
|
.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: 4px; }
|
|
.loader-5-box:nth-child(1):before, .loader-5-box:nth-child(4):before { margin-left: 7px; }
|
|
.loader-5-box:nth-child(3):before { margin-top: 14px; }
|
|
.loader-5-box:last-child { margin-bottom: 0; }
|
|
.loader-5-box:nth-child(1) { animation: l5-m1 4s infinite; }
|
|
.loader-5-box:nth-child(2) { animation: l5-m2 4s infinite; }
|
|
.loader-5-box:nth-child(3) { animation: l5-m3 4s infinite; }
|
|
.loader-5-box:nth-child(4) { animation: l5-m4 4s infinite; }
|
|
.loader-5-box:nth-child(5) { animation: l5-m5 4s infinite; }
|
|
.loader-5-box:nth-child(6) { animation: l5-m6 4s infinite; }
|
|
.loader-5-box:nth-child(7) { animation: l5-m7 4s infinite; }
|
|
.loader-5-box:nth-child(8) { animation: l5-m8 4s infinite; }
|
|
.loader-5-box:nth-child(9) { animation: l5-m9 4s infinite; }
|
|
@keyframes l5-m1 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(0, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(7px, 0); } 45% { transform: translate(7px, 7px); } 54% { transform: translate(7px, 7px); } 63% { transform: translate(7px, 7px); } 72% { transform: translate(7px, 0); } 81% { transform: translate(0, 0); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m2 { 9% { transform: translate(0, 0); } 18% { transform: translate(7px, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(7px, 0); } 45% { transform: translate(7px, 7px); } 54% { transform: translate(7px, 7px); } 63% { transform: translate(7px, 7px); } 72% { transform: translate(7px, 7px); } 81% { transform: translate(0, 7px); } 90% { transform: translate(0, 7px); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m3 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(-7px, 0); } 45% { transform: translate(-7px, 0); } 54% { transform: translate(-7px, 0); } 63% { transform: translate(-7px, 0); } 72% { transform: translate(-7px, 0); } 81% { transform: translate(-7px, -7px); } 90% { transform: translate(0, -7px); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m4 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(-7px, -7px); } 36% { transform: translate(0, -7px); } 45% { transform: translate(0, 0); } 54% { transform: translate(0, -7px); } 63% { transform: translate(0, -7px); } 72% { transform: translate(0, -7px); } 81% { transform: translate(-7px, -7px); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m5 { 9% { transform: translate(0, 0); } 18% { transform: translate(0, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(7px, 0); } 45% { transform: translate(7px, 0); } 54% { transform: translate(7px, 0); } 63% { transform: translate(7px, 0); } 72% { transform: translate(7px, 0); } 81% { transform: translate(7px, -7px); } 90% { transform: translate(0, -7px); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m6 { 9% { transform: translate(0, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(-7px, 0); } 36% { transform: translate(0, 0); } 45% { transform: translate(0, 0); } 54% { transform: translate(0, 0); } 63% { transform: translate(0, 0); } 72% { transform: translate(0, 7px); } 81% { transform: translate(-7px, 7px); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m7 { 9% { transform: translate(7px, 0); } 18% { transform: translate(7px, 0); } 27% { transform: translate(7px, 0); } 36% { transform: translate(0, 0); } 45% { transform: translate(0, -7px); } 54% { transform: translate(7px, -7px); } 63% { transform: translate(0, -7px); } 72% { transform: translate(0, -7px); } 81% { transform: translate(0, 0); } 90% { transform: translate(7px, 0); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m8 { 9% { transform: translate(0, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(-7px, -7px); } 36% { transform: translate(0, -7px); } 45% { transform: translate(0, -7px); } 54% { transform: translate(0, -7px); } 63% { transform: translate(0, -7px); } 72% { transform: translate(0, -7px); } 81% { transform: translate(7px, -7px); } 90% { transform: translate(7px, 0); } 100% { transform: translate(0, 0); } }
|
|
@keyframes l5-m9 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(-7px, 0); } 45% { transform: translate(0, 0); } 54% { transform: translate(0, 0); } 63% { transform: translate(-7px, 0); } 72% { transform: translate(-7px, 0); } 81% { transform: translate(-14px, 0); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
|
|
|
/* 6. 波纹 */
|
|
.loader-6 { --cell-size: 3px; --cell-spacing: 2px; --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 l6-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 l6-ripple { 0% { background-color: transparent; } 30% { background-color: var(--cell-color); } 60% { background-color: transparent; } 100% { background-color: transparent; } }
|
|
|
|
/* 7. 牛顿摆（方块版） */
|
|
.loader-7 { --uib-size: 28px; --uib-speed: 1.2s; position: relative; display: flex; align-items: center; justify-content: center; width: var(--uib-size); height: var(--uib-size); }
|
|
.loader-7-dot { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; width: 25%; transform-origin: center top; }
|
|
.loader-7-dot::after { content: ""; position: absolute; top: 75%; width: 3px; height: 3px; background: var(--loader-color); }
|
|
.loader-7-dot:first-child { animation: l7-swing var(--uib-speed) linear infinite; }
|
|
.loader-7-dot:last-child { animation: l7-swing2 var(--uib-speed) linear infinite; }
|
|
@keyframes l7-swing { 0% { transform: rotate(0deg); animation-timing-function: ease-out; } 25% { transform: rotate(70deg); animation-timing-function: ease-in; } 50% { transform: rotate(0deg); animation-timing-function: linear; } }
|
|
@keyframes l7-swing2 { 0% { transform: rotate(0deg); animation-timing-function: linear; } 50% { transform: rotate(0deg); animation-timing-function: ease-out; } 75% { transform: rotate(-70deg); animation-timing-function: ease-in; } }
|
|
|
|
/* 8. 脉冲环（方块版） */
|
|
.loader-8 { --uib-size: 22px; --uib-speed: .9s; position: relative; display: flex; align-items: center; justify-content: flex-start; height: var(--uib-size); width: var(--uib-size); }
|
|
.loader-8-dot { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; height: 100%; width: 100%; }
|
|
.loader-8-dot::before { content: ""; height: 3px; width: 3px; background-color: var(--loader-color); transform: scale(0); opacity: 0.5; animation: l8-pulse calc(var(--uib-speed) * 1.111) ease-in-out infinite; }
|
|
.loader-8-dot:nth-child(2) { transform: rotate(45deg); } .loader-8-dot:nth-child(2)::before { animation-delay: calc(var(--uib-speed) * -0.875); }
|
|
.loader-8-dot:nth-child(3) { transform: rotate(90deg); } .loader-8-dot:nth-child(3)::before { animation-delay: calc(var(--uib-speed) * -0.75); }
|
|
.loader-8-dot:nth-child(4) { transform: rotate(135deg); } .loader-8-dot:nth-child(4)::before { animation-delay: calc(var(--uib-speed) * -0.625); }
|
|
.loader-8-dot:nth-child(5) { transform: rotate(180deg); } .loader-8-dot:nth-child(5)::before { animation-delay: calc(var(--uib-speed) * -0.5); }
|
|
.loader-8-dot:nth-child(6) { transform: rotate(225deg); } .loader-8-dot:nth-child(6)::before { animation-delay: calc(var(--uib-speed) * -0.375); }
|
|
.loader-8-dot:nth-child(7) { transform: rotate(270deg); } .loader-8-dot:nth-child(7)::before { animation-delay: calc(var(--uib-speed) * -0.25); }
|
|
.loader-8-dot:nth-child(8) { transform: rotate(315deg); } .loader-8-dot:nth-child(8)::before { animation-delay: calc(var(--uib-speed) * -0.125); }
|
|
@keyframes l8-pulse { 0%,100% { transform: scale(0); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } }
|
|
|
|
/* 9. 轨道方块（去光晕，保留虚化） */
|
|
.loader-9 { --size-loader: 24px; --size-orbe: 3px; width: var(--size-loader); height: var(--size-loader); position: relative; transform: rotate(45deg); }
|
|
.loader-9-orbe { position: absolute; width: 100%; height: 100%; --delay: calc(var(--index) * 0.1s); animation: l9-orbit ease-in-out 1.5s var(--delay) infinite; opacity: calc(1 - calc(0.18 * var(--index))); }
|
|
.loader-9-orbe::after { position: absolute; content: ""; top: 0; left: 0; width: var(--size-orbe); height: var(--size-orbe); background-color: var(--loader-color); filter: blur(0.35px); }
|
|
@keyframes l9-orbit { 0% {} 80% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
|
|
|
|
/* 10. 阴影滚动（方块版） */
|
|
.loader-10 { --sq: 3px; width: var(--sq); height: var(--sq); position: relative; left: -10px; color: var(--loader-color); animation: l10-roll 2s linear infinite; }
|
|
@keyframes l10-roll {
|
|
0% { box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent; }
|
|
12% { box-shadow: 6px 0 var(--loader-color), 0 0 transparent, 0 0 transparent, 0 0 transparent; }
|
|
25% { box-shadow: 12px 0 var(--loader-color), 6px 0 var(--loader-color), 0 0 transparent, 0 0 transparent; }
|
|
36% { box-shadow: 18px 0 var(--loader-color), 12px 0 var(--loader-color), 6px 0 var(--loader-color), 0 0 transparent; }
|
|
50% { box-shadow: 24px 0 var(--loader-color), 18px 0 var(--loader-color), 12px 0 var(--loader-color), 6px 0 var(--loader-color); }
|
|
62% { box-shadow: 36px 0 transparent, 24px 0 var(--loader-color), 18px 0 var(--loader-color), 12px 0 var(--loader-color); }
|
|
75% { box-shadow: 36px 0 transparent, 36px 0 transparent, 24px 0 var(--loader-color), 18px 0 var(--loader-color); }
|
|
87% { box-shadow: 36px 0 transparent, 36px 0 transparent, 36px 0 transparent, 24px 0 var(--loader-color); }
|
|
100% { box-shadow: 36px 0 transparent, 36px 0 transparent, 36px 0 transparent, 36px 0 transparent; }
|
|
}
|
|
|
|
/* 11. 跳跃序列（方块版） */
|
|
.loader-11 { position: relative; display: flex; gap: 5px; }
|
|
.loader-11-square { width: 3px; height: 3px; background: var(--loader-color); animation: l11-jump 2s infinite ease; }
|
|
.loader-11-square:nth-child(2n) { animation-delay: 300ms; }
|
|
.loader-11-square:nth-child(3n) { animation-delay: 600ms; }
|
|
@keyframes l11-jump {
|
|
0%, 100% { transform: translateY(0); }
|
|
25% { transform: translateY(-10px) scale(0.66); }
|
|
50% { transform: translateY(0); }
|
|
75% { transform: translateY(3px) scale(0.9); }
|
|
}
|
|
|
|
/* 17. 四角循环（方块统一版） */
|
|
.loader-17 {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: relative;
|
|
}
|
|
.loader-17-square {
|
|
width: 3px;
|
|
height: 3px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -1.5px;
|
|
margin-left: -1.5px;
|
|
background: var(--loader-color);
|
|
animation: l17-move 1.8s ease-in-out infinite;
|
|
}
|
|
.loader-17-square:nth-child(1) { animation-delay: -0.45s; }
|
|
.loader-17-square:nth-child(2) { animation-delay: -0.9s; }
|
|
.loader-17-square:nth-child(3) { animation-delay: -1.35s; }
|
|
.loader-17-square:nth-child(4) { animation-delay: -1.8s; }
|
|
@keyframes l17-move {
|
|
0%, 100% { transform: translate(-6px, -6px); }
|
|
25% { transform: translate(6px, -6px); }
|
|
50% { transform: translate(6px, 6px); }
|
|
75% { transform: translate(-6px, 6px); }
|
|
}
|
|
|
|
/* 13. 混沌轨道（方块版） */
|
|
.loader-13 {
|
|
--uib-size: 24px;
|
|
--uib-speed: 1.5s;
|
|
position: relative;
|
|
width: var(--uib-size);
|
|
height: var(--uib-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: l13-rotate calc(var(--uib-speed) * 1.667) linear infinite;
|
|
}
|
|
.loader-13::before, .loader-13::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: var(--loader-color);
|
|
will-change: transform;
|
|
}
|
|
.loader-13::before { animation: l13-orbit var(--uib-speed) linear infinite; }
|
|
.loader-13::after { animation: l13-orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite; }
|
|
@keyframes l13-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
@keyframes l13-orbit {
|
|
0% { transform: translate(12px) scale(.74); opacity:.65; }
|
|
25% { transform: translate(0) scale(.47); opacity:.3; }
|
|
50% { transform: translate(-12px) scale(.74); opacity:.65; }
|
|
75% { transform: translate(0) scale(1); opacity:1; }
|
|
100% { transform: translate(12px) scale(.74); opacity:.65; }
|
|
}
|
|
|
|
/* 14. 跳蛙（方块版） */
|
|
.loader-14 {
|
|
--uib-size: 24px;
|
|
--uib-speed: 2s;
|
|
position: relative;
|
|
width: var(--uib-size);
|
|
height: var(--uib-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.loader-14-dot {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
animation: l14-leap var(--uib-speed) ease infinite;
|
|
}
|
|
.loader-14-dot::before {
|
|
content: "";
|
|
width: 3px;
|
|
height: 3px;
|
|
background: var(--loader-color);
|
|
will-change: transform;
|
|
}
|
|
.loader-14-dot:nth-child(2) { transform: translateX(calc(var(--uib-size) * 0.4)); animation-delay: calc(var(--uib-speed) / -1.5); }
|
|
.loader-14-dot:nth-child(3) { transform: translateX(calc(var(--uib-size) * 0.8)); animation-delay: calc(var(--uib-speed) / -3); }
|
|
@keyframes l14-leap {
|
|
0% { transform: translateX(0) rotate(0deg); }
|
|
33.333% { transform: translateX(0) rotate(180deg); }
|
|
66.666% { transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg); }
|
|
99.999% { transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg); }
|
|
100% { transform: translateX(0) rotate(0deg); }
|
|
}
|
|
|
|
/* 15. 波浪点阵（方块统一版） */
|
|
.loader-15 {
|
|
--uib-size: 28px;
|
|
--uib-speed: 0.7s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: var(--uib-size);
|
|
height: 16px;
|
|
}
|
|
.loader-15-square {
|
|
width: 3px;
|
|
height: 3px;
|
|
background: var(--loader-color);
|
|
animation: l15-wave var(--uib-speed) ease-in-out infinite;
|
|
}
|
|
.loader-15-square:nth-child(1) { animation-delay: calc(var(--uib-speed) * -0.45); }
|
|
.loader-15-square:nth-child(2) { animation-delay: calc(var(--uib-speed) * -0.3); }
|
|
.loader-15-square:nth-child(3) { animation-delay: calc(var(--uib-speed) * -0.15); }
|
|
.loader-15-square:nth-child(4) { animation-delay: 0s; }
|
|
@keyframes l15-wave {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
|
|
/* 16. 跟随轨迹（方块统一版） */
|
|
@keyframes l16-follow-the-leader {
|
|
0% { transform: rotate(0deg) translateY(-4px); }
|
|
60%, 100% { transform: rotate(360deg) translateY(-4px); }
|
|
}
|
|
.loader-16 {
|
|
width: 10px;
|
|
height: 22px;
|
|
position: relative;
|
|
}
|
|
.loader-16-square {
|
|
width: 2px;
|
|
height: 2px;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -1px;
|
|
animation: l16-follow-the-leader 1.25s infinite;
|
|
background: var(--loader-color);
|
|
}
|
|
.loader-16-square:nth-child(1) { top: 0; animation-delay: 0.15s; }
|
|
.loader-16-square:nth-child(2) { top: 5px; animation-delay: 0.3s; }
|
|
.loader-16-square:nth-child(3) { top: 10px; animation-delay: 0.45s; }
|
|
.loader-16-square:nth-child(4) { top: 15px; animation-delay: 0.6s; }
|
|
.loader-16-square:nth-child(5) { top: 20px; animation-delay: 0.75s; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>加载动画预览 V2 - 统一风格</h1>
|
|
<div class="loader-grid">
|
|
<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>
|
|
<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>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-2"></div></div><div class="loader-title">2. 双方块追逐</div></div>
|
|
<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>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-4"><div id="s1"></div><div id="s2"></div><div id="s3"></div><div id="s4"></div><div id="s5"></div></div></div><div class="loader-title">4. 五方块序列</div></div>
|
|
<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>
|
|
<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 class="loader-item"><div class="loader-wrapper"><div class="loader-7"><div class="loader-7-dot"></div><div class="loader-7-dot"></div><div class="loader-7-dot"></div><div class="loader-7-dot"></div></div></div><div class="loader-title">7. 牛顿摆（方块）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-8"><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div></div></div><div class="loader-title">8. 脉冲环（方块）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-9"><div class="loader-9-orbe" style="--index:0"></div><div class="loader-9-orbe" style="--index:1"></div><div class="loader-9-orbe" style="--index:2"></div><div class="loader-9-orbe" style="--index:3"></div><div class="loader-9-orbe" style="--index:4"></div></div></div><div class="loader-title">9. 轨道方块（虚化）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-10"></div></div><div class="loader-title">10. 阴影滚动（方块）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-11"><div class="loader-11-square"></div><div class="loader-11-square"></div><div class="loader-11-square"></div><div class="loader-11-square"></div><div class="loader-11-square"></div></div></div><div class="loader-title">11. 跳跃序列（方块）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-13"></div></div><div class="loader-title">13. 混沌轨道（方块）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-14"><div class="loader-14-dot"></div><div class="loader-14-dot"></div><div class="loader-14-dot"></div></div></div><div class="loader-title">14. 跳蛙（方块）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-15"><div class="loader-15-square"></div><div class="loader-15-square"></div><div class="loader-15-square"></div><div class="loader-15-square"></div></div></div><div class="loader-title">15. 波浪点阵（新）</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-16"><div class="loader-16-square"></div><div class="loader-16-square"></div><div class="loader-16-square"></div><div class="loader-16-square"></div><div class="loader-16-square"></div></div></div><div class="loader-title">16. 跟随轨迹</div></div>
|
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-17"><div class="loader-17-square"></div><div class="loader-17-square"></div><div class="loader-17-square"></div><div class="loader-17-square"></div></div></div><div class="loader-title">17. 四角循环（新）</div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|