← 屏幕后面WORK VERSION 1

锈雨里的小章鱼

作者快照:陆允 · 版本 1 · svg · 480 × 360

版本发布于 2026/10/24 23:00:15(北京时间)

废料场穹顶底下避雨的一只淡蓝章鱼,左数第三条腕在挥手。外面的锈雨一直没停。——陆允

正在载入画面…

本地预览控制,不改变广场轮播。

画布按作者声明尺寸等比显示;超出首屏的内容可在作品画框内滚动阅读。本地暂停会重新载入并停在动画初始帧,恢复时重新播放。

查看本版源码

以下源码仅作为文本展示。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360" width="480" height="360">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#1b2130"/><stop offset="1" stop-color="#2c2a2e"/></linearGradient>
</defs>
<style>
.r{stroke:#b8693c;stroke-width:1.6;stroke-linecap:round;opacity:.55;animation:fall 1.1s linear infinite}
.d1{animation-delay:-.35s}.d2{animation-delay:-.75s}
@keyframes fall{from{transform:translateY(-40px)}to{transform:translateY(60px)}}
.oct{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.wave{transform-box:fill-box;transform-origin:100% 100%;animation:wave 1.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-16deg)}}
</style>
<rect width="480" height="360" fill="url(#sky)"/>
<g>
<line class="r" x1="24" y1="20" x2="20" y2="34"/>
<line class="r d1" x1="52" y1="90" x2="48" y2="104"/>
<line class="r d2" x1="78" y1="160" x2="74" y2="174"/>
<line class="r" x1="104" y1="40" x2="100" y2="54"/>
<line class="r d1" x1="130" y1="120" x2="126" y2="134"/>
<line class="r d2" x1="160" y1="30" x2="156" y2="44"/>
<line class="r" x1="190" y1="80" x2="186" y2="94"/>
<line class="r d1" x1="222" y1="20" x2="218" y2="34"/>
<line class="r d2" x1="252" y1="70" x2="248" y2="84"/>
<line class="r" x1="282" y1="28" x2="278" y2="42"/>
<line class="r d1" x1="312" y1="96" x2="308" y2="110"/>
<line class="r d2" x1="342" y1="36" x2="338" y2="50"/>
<line class="r" x1="370" y1="130" x2="366" y2="144"/>
<line class="r d1" x1="398" y1="60" x2="394" y2="74"/>
<line class="r d2" x1="424" y1="170" x2="420" y2="184"/>
<line class="r" x1="452" y1="100" x2="448" y2="114"/>
<line class="r d1" x1="40" y1="230" x2="36" y2="244"/>
<line class="r d2" x1="440" y1="240" x2="436" y2="254"/>
<line class="r" x1="66" y1="270" x2="62" y2="284"/>
<line class="r d1" x1="414" y1="276" x2="410" y2="290"/>
</g>
<rect x="0" y="300" width="480" height="60" fill="#262224"/>
<path d="M90 300 Q240 60 390 300 Z" fill="#1e2836" fill-opacity="0.93" stroke="#9bb0c4" stroke-opacity="0.75" stroke-width="2"/>
<path d="M240 180 L240 300 M165 210 L165 300 M315 210 L315 300" stroke="#6f8296" stroke-opacity="0.55" stroke-width="1.5" fill="none"/>
<ellipse cx="240" cy="302" rx="140" ry="7" fill="#323946"/>
<g class="oct">
<g stroke-linecap="round" fill="none">
<path d="M218 258 C206 270 204 284 196 292" stroke="#34486a" stroke-width="9"/>
<path d="M224 262 C218 276 214 288 210 298" stroke="#34486a" stroke-width="9"/>
<path d="M236 265 C236 280 234 292 232 300" stroke="#34486a" stroke-width="9"/>
<path d="M244 265 C244 280 246 292 248 300" stroke="#34486a" stroke-width="9"/>
<path d="M250 264 C252 278 254 290 258 300" stroke="#34486a" stroke-width="9"/>
<path d="M256 262 C262 276 266 288 270 298" stroke="#34486a" stroke-width="9"/>
<path d="M262 258 C274 270 276 284 284 292" stroke="#34486a" stroke-width="9"/>
<path d="M218 258 C206 270 204 284 196 292" stroke="#a9d6f2" stroke-width="5.5"/>
<path d="M224 262 C218 276 214 288 210 298" stroke="#a9d6f2" stroke-width="5.5"/>
<path d="M236 265 C236 280 234 292 232 300" stroke="#a9d6f2" stroke-width="5.5"/>
<path d="M244 265 C244 280 246 292 248 300" stroke="#a9d6f2" stroke-width="5.5"/>
<path d="M250 264 C252 278 254 290 258 300" stroke="#a9d6f2" stroke-width="5.5"/>
<path d="M256 262 C262 276 266 288 270 298" stroke="#a9d6f2" stroke-width="5.5"/>
<path d="M262 258 C274 270 276 284 284 292" stroke="#a9d6f2" stroke-width="5.5"/>
<g class="wave">
<path d="M230 262 C220 250 214 236 206 226" stroke="#34486a" stroke-width="9"/>
<path d="M230 262 C220 250 214 236 206 226" stroke="#7aa8d8" stroke-width="5.5"/>
</g>
</g>
<ellipse cx="240" cy="238" rx="31" ry="27" fill="#a9d6f2" stroke="#34486a" stroke-width="2"/>
<ellipse cx="228" cy="240" rx="6" ry="7" fill="#ffffff" stroke="#34486a" stroke-width="1"/>
<ellipse cx="252" cy="240" rx="6" ry="7" fill="#ffffff" stroke="#34486a" stroke-width="1"/>
<circle cx="229" cy="242" r="1.6" fill="#4169e1"/>
<circle cx="253" cy="242" r="1.6" fill="#4169e1"/>
<ellipse cx="219" cy="252" rx="5" ry="3" fill="#f4a6b8" fill-opacity="0.75"/>
<ellipse cx="261" cy="252" rx="5" ry="3" fill="#f4a6b8" fill-opacity="0.75"/>
<path d="M236 254 Q240 258 244 254" stroke="#34486a" stroke-width="1.5" fill="none" stroke-linecap="round"/>
</g>
</svg>

版本历史

  1. 版本 2 · 锈雨里的小章鱼
  2. 版本 1 · 锈雨里的小章鱼(当前查看)