给大家看看我用astra生成的鹈鹕骑自行车的 2D 动画

村长-linuxdo2026-09-07

9141

代码```
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pelican Loading Animation</title>
<style>
:root {
color-scheme: light;
--ink: #172033;
--muted: #68748a;
--paper: #f8fbff;
--sky: #dff3ff;
--water: #9ddcf0;
--accent: #ff765f;
--yellow: #ffd35a;
}

{

box-sizing: border-box;
}

html,
body {
min-height: 100%;
margin: 0;
}
body {
display: grid;
min-height: 100vh;
place-items: center;
overflow: hidden;
background:
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.9), transparent 25%),
linear-gradient(155deg, var(--paper) 0%, #edf8ff 48%, #d4eff8 100%);
color: var(--ink);
font-family:
Inter,
'Noto Sans SC',
system-ui,
-apple-system,
sans-serif;
}

.loader {
width: min(92vw, 720px);
text-align: center;
}

.scene {
position: relative;
width: 100%;
aspect-ratio: 1.55;
overflow: hidden;
border: 1px solid rgba(75, 144, 176, 0.18);
border-radius: 28px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 38%), var(--sky);
box-shadow: 0 22px 60px rgba(73, 127, 153, 0.18);
}

.scene::before,
.scene::after {
position: absolute;
content: '';
border-radius: 999px;
background: rgba(255, 255, 255, 0.62);
filter: blur(1px);
}

.scene::before {
width: 25%;
height: 7%;
top: 20%;
left: 9%;
box-shadow:
54px 9px 0 rgba(255, 255, 255, 0.42),
105px -6px 0 rgba(255, 255, 255, 0.35);
}

.scene::after {
width: 20%;
height: 6%;
top: 34%;
right: 8%;
box-shadow:
-44px 8px 0 rgba(255, 255, 255, 0.42),
-87px -4px 0 rgba(255, 255, 255, 0.32);
}

svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.pelican {
transform-box: fill-box;
transform-origin: center bottom;
animation: ride-bob 0.62s ease-in-out infinite alternate;
}

.wheel {
transform-box: fill-box;
transform-origin: center;
animation: wheel-spin 0.72s linear infinite;
}

.pedal-arm {
transform-box: fill-box;
transform-origin: 50% 0;
animation: pedal 0.72s linear infinite;
}

.wing {
transform-box: fill-box;
transform-origin: 82% 80%;
animation: wing-flap 0.9s ease-in-out infinite alternate;
}

.head {
transform-box: fill-box;
transform-origin: 62% 76%;
animation: head-bob 0.62s ease-in-out infinite alternate;
}

.water-line {
stroke-dasharray: 34 24;
animation: water-drift 2.6s linear infinite;
}

.loading-copy {
margin-top: 22px;
}

.loading-copy h1 {
margin: 0;
font-size: clamp(1.35rem, 3vw, 1.85rem);
letter-spacing: 0;
}

.loading-copy p {
margin: 8px 0 0;
color: var(--muted);
font-size: clamp(0.82rem, 2vw, 0.98rem);
}

.dots::after {
content: '';
display: inline-block;
width: 1.6em;
text-align: left;
animation: dots 1.2s steps(4, end) infinite;
}

@keyframes ride-bob {
from {
transform: translateY(0);
}
to {
transform: translateY(-3px);
}
}

@keyframes head-bob {
from {
transform: rotate(-1deg);
}
to {
transform: rotate(2deg);
}
}

@keyframes wing-flap {
from {
transform: rotate(-2deg);
}
to {
transform: rotate(8deg);
}
}

@keyframes wheel-spin {
to {
transform: rotate(360deg);
}
}

@keyframes pedal {
to {
transform: rotate(360deg);
}
}

@keyframes water-drift {
to {
stroke-dashoffset: -116;
}
}

@keyframes dots {
0% {
content: '';
}
25% {
content: '.';
}
50% {
content: '..';
}
75%,
100% {
content: '...';
}
}

@media (max-width: 520px) {
.scene {
border-radius: 20px;
}
.loading-copy {
margin-top: 16px;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
}
</style>
</head>
</html>
<body>
<main class="loader" aria-label="PBO Wiki 加载动画预览">
<section class="scene" aria-hidden="true">
<svg viewBox="0 0 800 516" role="img" aria-label="一只鹈鹕骑着自行车">
<defs>
<linearGradient id="ground" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#78c8df" stop-opacity="0" />
<stop offset="0.5" stop-color="#78c8df" stop-opacity="0.8" />
<stop offset="1" stop-color="#78c8df" stop-opacity="0" />
</linearGradient>
<filter id="soft-shadow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>

<path d="M402 245 C415 237 432 236 448 243" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round" opacity="0.75" />
</g>
</svg>
</section>
<div class="loading-copy">
<h1>Wiki 正在准备中<span class="dots" aria-hidden="true"></span></h1>
<p>鹈鹕车手正在把最新内容送到你面前</p>
</div>
</main>
</body>
</html>

主楼

给大家看看我用astra生成的 鹈鹕骑自行车的 2D 动画

发表回复