4.6
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鹈鹚骑自行车 — SVG 2D动画</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600&display=swap');
body {
margin: 0;
background: linear-gradient(#1a1a1a, #2a2a2a);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Noto Sans SC', system-ui, sans-serif;
overflow: hidden;
}
.container {
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
border-radius: 16px;
overflow: hidden;
background: #222;
}
svg {
width: 820px;
height: 380px;
background: linear-gradient(#d0e0ff, #a0c8ff);
display: block;
}
#containerGroup {
animation: ride 7s linear infinite;
}
@keyframes ride {
0% {
transform: translateX(0);
}
100% {
transform: translateX(680px);
}
}
.wheel {
animation: wheelSpin 0.75s linear infinite;
}
@keyframes wheelSpin {
to {
transform: rotate(360deg);
}
}
.pelicanBody {
animation: pelicanRide 2.6s ease-in-out infinite;
}
@keyframes pelicanRide {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-4px);
}
}
.wingLeft {
animation: wingFlap 0.85s ease-in-out infinite alternate;
}
.wingRight {
animation: wingFlap 0.85s ease-in-out infinite alternate reverse;
}
@keyframes wingFlap {
0% {
transform: rotate(-28deg);
}
100% {
transform: rotate(28deg);
}
}
.pelicanHead {
animation: headSwing 2.1s ease-in-out infinite;
}
@keyframes headSwing {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
}
.beak {
animation: beakOpenClose 1.8s ease-in-out infinite alternate;
}
@keyframes beakOpenClose {
0% {
d: path("M260 58 C265 45 285 42 300 60 L 258 68 Z");
}
100% {
d: path("M260 60 C270 48 290 48 305 60 L 258 68 Z");
}
}
</style>
</head>
<body>
<div class="container">
<svg id="svgRoot" width="820" height="380" viewBox="0 0 820 380" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
/* 风车辐条 */
.spoke {
stroke: #333;
stroke-width: 3.5;
}
</style>
</defs>
<!-- 自行车容器 -->
<g id="bikeContainer">
<!-- 后轮 -->
<g id="rearWheel" class="wheel">
<!-- 后轮轮胎 -->
<circle cx="148" cy="148" r="62" fill="none" stroke="#1f2937" stroke-width="22"/>
<!-- 后轮毂 -->
<circle cx="148" cy="148" r="21" fill="#111"/>
<!-- 后轮辐条 -->
<g>
<line x1="122" y1="135" x2="174" y2="161" class="spoke" transform="rotate(58 148 148)"/>
<line x1="115" y1="135" x2="181" y2="161" class="spoke" transform="rotate(116 148 148)"/>
<line x1="118" y1="135" x2="178" y2="142" class="spoke" transform="rotate(28 148 148)"/>
</g>
</g>
<!-- 前轮 -->
<g id="frontWheel" class="wheel">
<!-- 前轮轮胎 -->
<circle cx="248" cy="148" r="62" fill="none" stroke="#1f2937" stroke-width="22"/>
<!-- 前轮毂 -->
<circle cx="248" cy="148" r="21" fill="#111"/>
<!-- 前轮辐条 -->
<g>
<line x1="225" y1="125" x2="271" y2="171" class="spoke" transform="rotate(55 248 148)"/>
<line x1="218" y1="125" x2="278" y2="171" class="spoke" transform="rotate(110 248 148)"/>
<line x1="232" y1="125" x2="264" y2="130" class="spoke" transform="rotate(25 248 148)"/>
</g>
</g>
<!-- 车架(黑/灰色) -->
<!-- 后车架 -->
<line x1="155" y1="148" x2="235" y2="155" stroke="#1f2937" stroke-width="18" stroke-linecap="round"/>
<!-- 后叉 -->
<line x1="235" y1="155" x2="255" y2="118" stroke="#1f2937" stroke-width="14" stroke-linecap="round"/>
<!-- 前叉 -->
<line x1="255" y1="118" x2="300" y2="88" stroke="#1f2937" stroke-width="13" stroke-linecap="round"/>
<!-- 车头管 -->
<line x1="300" y1="88" x2="310" y2="78" stroke="#1f2937" stroke-width="11" stroke-linecap="round"/>
<!-- 龙头 -->
<line x1="310" y1="78" x2="295" y2="65" stroke="#1f2937" stroke-width="12" stroke-linecap="round"/>
<!-- 另一侧把手 -->
<line x1="310" y1="78" x2="325" y2="65" stroke="#1f2937" stroke-width="12" stroke-linecap="round"/>
<!-- 鞍座管 -->
<line x1="155" y1="148" x2="145" y2="95" stroke="#1f2937" stroke-width="16" stroke-linecap="round"/>
<!-- 鞍座 -->
<rect x="118" y="72" width="75" height="28" fill="#1f2937" rx="8"/>
<!-- 链条 -->
<g>
<line x1="162" y1="160" x2="220" y2="160" stroke="#334155" stroke-width="9" stroke-linecap="round" stroke-dasharray="6,8"/>
<line x1="162" y1="165" x2="220" y2="165" stroke="#334155" stroke-width="9" stroke-linecap="round" stroke-dasharray="6,8"/>
</g>
</g>
<!-- 鹈鹚容器 -->
<g id="pelicanContainer" class="pelicanBody">
<!-- 身体 -->
<ellipse cx="195" cy="148" rx="44" ry="53" fill="#f5e8d3" stroke="#1f2937" stroke-width="6.5"/>
<!-- 翅膀(左侧) -->
<g class="wingLeft">
<path d="M155 135 Q135 115 118 135 Q135 125 155 135" fill="#f5e8d3" stroke="#1f2937" stroke-width="5"/>
</g>
<!-- 翅膀(右侧) -->
<g class="wingRight">
<path d="M210 125 Q230 108 248 125 Q235 118 210 125" fill="#f5e8d3" stroke="#1f2937" stroke-width="5"/>
</g>
<!-- 脖子 -->
<line x1="185" y1="105" x2="235" y2="72" stroke="#f5e8d3" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 头 -->
<ellipse class="pelicanHead" cx="238" cy="55" rx="29" ry="30" fill="#f5e8d3" stroke="#1f2937" stroke-width="5"/>
<!-- 嘴巴 -->
<path class="beak" d="M260 57 C267 46 285 44 298 57 L 258 67 Z" fill="#ffdd44" stroke="#1f2937" stroke-width="3.5"/>
<!-- 眼睛 -->
<circle cx="240" cy="48" r="8" fill="#fff"/>
<circle cx="242" cy="46" r="4" fill="#1f2937"/>
<!-- 腿 -->
<g>
<!-- 左腿 -->
<line x1="175" y1="182" x2="152" y2="192" stroke="#e87a00" stroke-width="21" stroke-linecap="round"/>
<!-- 右腿 -->
<line x1="215" y1="182" x2="192" y2="192" stroke="#e87a00" stroke-width="21" stroke-linecap="round"/>
</g>
<!-- 脚部 -->
<circle cx="152" cy="197" r="7" fill="#e87a00"/>
<circle cx="192" cy="197" r="7" fill="#e87a00"/>
</g>
</svg>
</div>
<script>
// 自动刷新让它永远动
console.log('%c鹈鹚正在为你愉快地骑行 bicycle!', 'color:#e87a00; font-family:monospace');
</script>
</body>
</html>
同一Grok2api Free号,同一IP,4.5的速度快,且治好了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鹈鹕骑自行车 - 2D SVG 动画</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 65%, #98D98E 65%, #7CBB6C 100%);
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
overflow: hidden;
}
h1 {
color: #2c3e50;
margin-bottom: 12px;
font-size: 1.6rem;
text-shadow: 1px 1px 0 #fff;
}
.stage {
background: #87CEEB;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
overflow: hidden;
}
svg {
display: block;
width: 900px;
max-width: 95vw;
height: auto;
}
/* 整辆车向右移动 */
.vehicle {
animation: ride 9s linear infinite;
}
@keyframes ride {
from { transform: translateX(-320px); }
to { transform: translateX(980px); }
}
/* 轻微上下颠簸 */
.bounce {
animation: bob 0.35s ease-in-out infinite alternate;
}
@keyframes bob {
from { transform: translateY(0); }
to { transform: translateY(-7px); }
}
/* 轮子旋转 */
.wheel {
animation: spin 1.5s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 曲柄(踏板)旋转 */
.crank {
animation: spin 1.5s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
/* 翅膀轻扇 */
.wing {
animation: flap 0.9s ease-in-out infinite alternate;
transform-box: fill-box;
transform-origin: 85% 60%;
}
@keyframes flap {
from { transform: rotate(0deg); }
to { transform: rotate(18deg); }
}
/* 脖子轻微点头 */
.neck-group {
animation: nod 1.8s ease-in-out infinite alternate;
transform-box: fill-box;
transform-origin: 20% 80%;
}
@keyframes nod {
from { transform: rotate(-3deg); }
to { transform: rotate(4deg); }
}
.caption {
margin-top: 16px;
color: #333;
font-size: 1rem;
opacity: 0.85;
}
</style>
</head>
<body>
<h1>鹈鹕骑自行车</h1>
<div class="stage">
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<!-- 天空装饰:简单云朵 -->
<g fill="#fff" opacity="0.85">
<ellipse cx="120" cy="60" rx="40" ry="22"/>
<ellipse cx="155" cy="55" rx="35" ry="25"/>
<ellipse cx="185" cy="65" rx="30" ry="18"/>
<ellipse cx="520" cy="45" rx="45" ry="20"/>
<ellipse cx="560" cy="40" rx="38" ry="26"/>
<ellipse cx="595" cy="50" rx="32" ry="18"/>
</g>
<!-- 地面 / 道路 -->
<rect x="0" y="338" width="800" height="62" fill="#5a5a5a"/>
<rect x="0" y="338" width="800" height="8" fill="#777"/>
<!-- 道路中线 -->
<line x1="0" y1="355" x2="800" y2="355" stroke="#fff" stroke-width="3" stroke-dasharray="28 18" opacity="0.9"/>
<!-- 车辆 + 鹈鹕 整体 -->
<g class="vehicle">
<g class="bounce">
<!-- ========== 后轮 ========== -->
<g class="wheel">
<circle cx="95" cy="310" r="42" fill="#1a1a1a" stroke="#111" stroke-width="9"/>
<circle cx="95" cy="310" r="36" fill="none" stroke="#333" stroke-width="2"/>
<circle cx="95" cy="310" r="9" fill="#555"/>
<!-- 辐条 -->
<g stroke="#999" stroke-width="2.5" stroke-linecap="round">
<line x1="95" y1="310" x2="95" y2="270"/>
<line x1="95" y1="310" x2="95" y2="350"/>
<line x1="95" y1="310" x2="55" y2="310"/>
<line x1="95" y1="310" x2="135" y2="310"/>
<line x1="95" y1="310" x2="123" y2="282"/>
<line x1="95" y1="310" x2="67" y2="282"/>
<line x1="95" y1="310" x2="123" y2="338"/>
<line x1="95" y1="310" x2="67" y2="338"/>
</g>
</g>
<!-- ========== 前轮 ========== -->
<g class="wheel">
<circle cx="275" cy="310" r="42" fill="#1a1a1a" stroke="#111" stroke-width="9"/>
<circle cx="275" cy="310" r="36" fill="none" stroke="#333" stroke-width="2"/>
<circle cx="275" cy="310" r="9" fill="#555"/>
<g stroke="#999" stroke-width="2.5" stroke-linecap="round">
<line x1="275" y1="310" x2="275" y2="270"/>
<line x1="275" y1="310" x2="275" y2="350"/>
<line x1="275" y1="310" x2="235" y2="310"/>
<line x1="275" y1="310" x2="315" y2="310"/>
<line x1="275" y1="310" x2="303" y2="282"/>
<line x1="275" y1="310" x2="247" y2="282"/>
<line x1="275" y1="310" x2="303" y2="338"/>
<line x1="275" y1="310" x2="247" y2="338"/>
</g>
</g>
<!-- ========== 车架 ========== -->
<g stroke="#2c3e50" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- 后下叉 + 坐管 -->
<line x1="95" y1="310" x2="155" y2="310"/>
<line x1="95" y1="310" x2="130" y2="225"/>
<line x1="155" y1="310" x2="130" y2="225"/>
<!-- 下管 -->
<line x1="155" y1="310" x2="245" y2="245"/>
<!-- 上管 -->
<line x1="130" y1="225" x2="240" y2="235"/>
<!-- 头管 + 前叉 -->
<line x1="245" y1="245" x2="255" y2="205"/>
<line x1="255" y1="205" x2="275" y2="310"/>
</g>
<!-- 车座 -->
<ellipse cx="122" cy="218" rx="28" ry="9" fill="#5D4037" transform="rotate(-12 122 218)"/>
<rect x="118" y="218" width="8" height="14" rx="2" fill="#4E342E"/>
<!-- 车把 -->
<g stroke="#2c3e50" stroke-width="6" stroke-linecap="round" fill="none">
<line x1="255" y1="205" x2="255" y2="178"/>
<line x1="225" y1="178" x2="285" y2="178"/>
<line x1="225" y1="178" x2="218" y2="192"/>
<line x1="285" y1="178" x2="292" y2="168"/>
</g>
<!-- 车把套 -->
<circle cx="220" cy="188" r="5" fill="#333"/>
<circle cx="290" cy="170" r="5" fill="#333"/>
<!-- ========== 曲柄 / 踏板 ========== -->
<g class="crank">
<circle cx="155" cy="310" r="7" fill="#222"/>
<!-- 曲柄臂 -->
<line x1="120" y1="310" x2="190" y2="310" stroke="#444" stroke-width="7" stroke-linecap="round"/>
<!-- 左右踏板 -->
<rect x="108" y="300" width="22" height="18" rx="4" fill="#222"/>
<rect x="180" y="300" width="22" height="18" rx="4" fill="#222"/>
</g>
<!-- ========== 鹈鹕 ========== -->
<g class="pelican">
<!-- 尾巴 -->
<path d="M95 195 Q70 185 65 170 Q85 180 100 190 Z" fill="#e8e8e8" stroke="#ccc" stroke-width="1"/>
<!-- 身体 -->
<ellipse cx="135" cy="195" rx="48" ry="32" fill="#f8f8f8" stroke="#ddd" stroke-width="1.5"/>
<!-- 翅膀(会扇动) -->
<g class="wing">
<path d="M105 185
Q75 165 82 135
Q115 145 130 165
Q140 180 125 190 Z"
fill="#e0e0e0" stroke="#bbb" stroke-width="1.5"/>
<!-- 翅膀纹理 -->
<path d="M95 175 Q100 160 115 155" fill="none" stroke="#ccc" stroke-width="1.2"/>
<path d="M100 182 Q108 168 122 165" fill="none" stroke="#ccc" stroke-width="1.2"/>
</g>
<!-- 腿(简化卡通,放在踏板附近) -->
<g stroke="#f0f0f0" stroke-linecap="round">
<!-- 后腿 -->
<line x1="125" y1="220" x2="135" y2="265" stroke-width="10"/>
<line x1="135" y1="265" x2="145" y2="298" stroke-width="8"/>
<!-- 前腿 -->
<line x1="155" y1="218" x2="165" y2="260" stroke-width="10"/>
<line x1="165" y1="260" x2="172" y2="298" stroke-width="8"/>
<!-- 简单脚蹼 -->
<ellipse cx="148" cy="302" rx="12" ry="5" fill="#f0f0f0"/>
<ellipse cx="175" cy="302" rx="12" ry="5" fill="#f0f0f0"/>
</g>
<!-- 脖子 + 头 -->
<g class="neck-group">
<!-- 脖子 -->
<path d="M165 180
Q185 155 195 135"
fill="none" stroke="#f8f8f8" stroke-width="20" stroke-linecap="round"/>
<!-- 头部 -->
<circle cx="205" cy="128" r="20" fill="#f8f8f8" stroke="#ddd" stroke-width="1"/>
<!-- 眼睛 -->
<circle cx="214" cy="122" r="6" fill="#222"/>
<circle cx="216" cy="120" r="2.2" fill="#fff"/>
<!-- 小眉毛增加表情 -->
<path d="M206 112 Q214 108 222 112" fill="none" stroke="#555" stroke-width="1.8" stroke-linecap="round"/>
<!-- 标志性长喙 + 喉囊 -->
<!-- 上喙 -->
<path d="M222 128
Q255 118 295 135
Q270 138 222 136 Z"
fill="#FFD54F" stroke="#F9A825" stroke-width="1.5"/>
<!-- 下喙 / 喉囊(标志性的橙色大袋子) -->
<path d="M222 136
Q248 175 288 148
Q265 155 222 142 Z"
fill="#FF8F00" stroke="#EF6C00" stroke-width="1.5"/>
<!-- 喙尖高光 -->
<path d="M280 136 Q290 135 295 135" fill="none" stroke="#FFE082" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- 靠近车把的那只翅膀(扶把) -->
<path d="M160 175
Q195 160 235 175
Q220 185 195 182
Q175 180 160 178 Z"
fill="#e0e0e0" stroke="#bbb" stroke-width="1"/>
</g>
</g>
</g>
<!-- 小石头 / 地面细节(增加一点生活感) -->
<g fill="#666" opacity="0.6">
<ellipse cx="50" cy="370" rx="8" ry="3"/>
<ellipse cx="180" cy="375" rx="6" ry="2.5"/>
<ellipse cx="420" cy="368" rx="9" ry="3"/>
<ellipse cx="610" cy="372" rx="7" ry="2.5"/>
<ellipse cx="750" cy="369" rx="8" ry="3"/>
</g>
</svg>
</div>
<p class="caption">鹈鹕踏着自行车欢乐前行 · 纯 SVG + CSS 动画</p>
</body>
</html>