夜雨聆风效果演示
文末可一键复制完整代码
源代码
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>可爱的鸣人</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script><scriptsrc="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>body{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100vh;background:radial-gradient(ellipse at center,#1a2744 0%,#0d1117 70%);overflow:hidden}body.naruto{position:relative;width:180px;height:260px}body.naruto.chakra{position:absolute;top:10px;left:50%;width:200px;height:220px;border-radius:50%;border:3px solid rgba(79,195,247,0.2);box-shadow:0020pxrgba(79,195,247,0.15),inset 0020pxrgba(79,195,247,0.05);transform:translateX(-50%);animation:chakra-pulse 3s ease infinite;pointer-events:none;z-index:0}body.naruto.body{position:relative;width:160px;height:210px;margin:0 auto;border-top-right-radius:80px;border-top-left-radius:80px;border-bottom-right-radius:16px;border-bottom-left-radius:16px;background:linear-gradient(to bottom,#FFDBAC 0%,#FFDBAC 42%,#FF6600 42%,#FF6600 100%);animation:float 4s ease infinite;z-index:1}body.naruto.body.hair{position:absolute;top:-38px;left:50%;width:170px;height:70px;transform:translateX(-50%);z-index:3}body.naruto.body.hair.spike{position:absolute;bottom:0;width:22px;height:50px;background:#FFCC00;border-radius:50%50%00;transform-origin:bottom center}body.naruto.body.hair.spike.s1{left:10px;height:42px;transform:rotate(-35deg)}body.naruto.body.hair.spike.s2{left:28px;height:55px;transform:rotate(-18deg)}body.naruto.body.hair.spike.s3{left:52px;height:62px;transform:rotate(-5deg)}body.naruto.body.hair.spike.s4{left:74px;height:68px;transform:rotate(0deg)}body.naruto.body.hair.spike.s5{left:96px;height:58px;transform:rotate(8deg)}body.naruto.body.hair.spike.s6{left:118px;height:48px;transform:rotate(22deg)}body.naruto.body.hair.spike.s7{left:138px;height:38px;transform:rotate(38deg)}body.naruto.body.headband{position:absolute;top:28px;left:50%;width:130px;height:22px;background:#1A3A6B;border-radius:4px;transform:translateX(-50%);z-index:4;box-shadow:02px4pxrgba(0,0,0,0.3)}body.naruto.body.headband.plate{position:absolute;top:50%;left:50%;width:52px;height:18px;background:linear-gradient(to bottom,#E8E8E8,#A0A0A0);border-radius:3px;border:1px solid #888;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}body.naruto.body.headband.plate.konoha{width:14px;height:14px;border:2.5px solid #333;border-radius:50%;border-top-color:transparent;border-right-color:transparent;transform:rotate(-45deg)}body.naruto.body.face{display:flex;flex-wrap:wrap;position:absolute;top:58px;left:37px;width:86px;height:50px;z-index:2}body.naruto.body.face.eye{position:relative;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #333;overflow:hidden}body.naruto.body.face.eye::after{content:"";position:absolute;top:4px;left:5px;width:12px;height:14px;border-radius:50%;background:#2196F3}body.naruto.body.face.eye.shine{position:absolute;top:5px;left:8px;width:5px;height:5px;border-radius:50%;background:#fff;z-index:1}body.naruto.body.face.eye.left{margin-right:30px}body.naruto.body.face.mouth{margin-top:4px;width:28px;height:12px;margin-left:22px;border-bottom-left-radius:14px10px;border-bottom-right-radius:14px10px;border-top-left-radius:3px;border-top-right-radius:3px;background-color:#333}body.naruto.body.face.whisker{position:absolute;top:22px;display:flex;flex-direction:column;gap:4px}body.naruto.body.face.whiskerspan{display:block;width:18px;height:2px;background:#555;border-radius:2px}body.naruto.body.face.whisker.left{left:-14px}body.naruto.body.face.whisker.leftspan:nth-child(1){transform:rotate(-8deg);width:14px}body.naruto.body.face.whisker.leftspan:nth-child(2){transform:rotate(-2deg)}body.naruto.body.face.whisker.leftspan:nth-child(3){transform:rotate(4deg);width:14px}body.naruto.body.face.whisker.right{right:-14px;align-items:flex-end}body.naruto.body.face.whisker.rightspan:nth-child(1){transform:rotate(8deg);width:14px}body.naruto.body.face.whisker.rightspan:nth-child(2){transform:rotate(2deg)}body.naruto.body.face.whisker.rightspan:nth-child(3){transform:rotate(-4deg);width:14px}body.naruto.body.zip{position:absolute;top:108px;left:50%;width:4px;height:50px;background:#222;border-radius:2px;transform:translateX(-50%)}body.naruto.body.zip::before{content:"";position:absolute;bottom:-6px;left:50%;width:10px;height:8px;background:#C0C0C0;border-radius:2px;transform:translateX(-50%)}body.naruto.body.arm{position:absolute;top:118px;width:55px;height:38px;background-color:#FF6600}body.naruto.body.arm.left{left:-4px;border-radius:60%100%;animation:arms-left 4s ease infinite}body.naruto.body.arm.right{right:-58px;border-radius:100%60%;animation:arms-right 4s ease infinite}body.naruto.body.arm.right.rasengan{position:absolute;top:-18px;right:-10px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35%35%,#fff 0%,#81D4FA 30%,#0288D1 70%,#01579B 100%);box-shadow:0012px#4FC3F7,0024pxrgba(79,195,247,0.6),0040pxrgba(79,195,247,0.3);animation:rasengan-spin 1.2s linear infinite,rasengan-glow 2s ease infinite}body.naruto.body.arm.right.rasengan::before{content:"";position:absolute;top:50%;left:50%;width:60%;height:60%;border-radius:50%;border:2px dashed rgba(255,255,255,0.5);transform:translate(-50%,-50%);animation:rasengan-inner-spin 0.8s linear infinite reverse}body.naruto.body.arm.right.rasengan::after{content:"";position:absolute;top:50%;left:50%;width:80%;height:80%;border-radius:50%;border:1px solid rgba(255,255,255,0.25);transform:translate(-50%,-50%);animation:rasengan-inner-spin 1.5s linear infinite}body.naruto.body.legs{display:flex;justify-content:center;gap:16px;position:absolute;top:100%;left:50%;transform:translateX(-50%)}body.naruto.body.legs.leg{position:relative;top:-8px;width:36px;height:40px;background:#FF6600;border-bottom-left-radius:8px;border-bottom-right-radius:8px}body.naruto.body.legs.leg.sandal{position:absolute;bottom:-10px;left:50%;width:44px;height:14px;background:#1a1a1a;border-radius:6px6px10px10px;transform:translateX(-50%)}body.naruto.body.legs.leg.sandal::after{content:"";position:absolute;top:4px;left:50%;width:30px;height:3px;background:#333;border-radius:2px;transform:translateX(-50%)}body.naruto.shadow{position:absolute;bottom:-60px;left:50%;width:200px;height:12px;border-radius:100%;background-color:rgba(0,0,0,0.4);animation:shadow 4s ease infinite}@keyframes float{0%,100%{top:0px}40%{top:-40px}}@keyframes arms-left{0%,100%{transform:translate(-50%,-50%) rotate(50deg)}40%{transform:translate(-50%,-50%) rotate(40deg)}}@keyframes arms-right{0%,100%{transform:translate(-50%,-50%) rotate(-50deg)}40%{transform:translate(-50%,-50%) rotate(-40deg)}}@keyframes shadow{0%,100%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(0.5)}}@keyframes chakra-pulse{0%,100%{opacity:0.4;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}@keyframes rasengan-spin{to{transform:rotate(360deg)}}@keyframes rasengan-inner-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rasengan-glow{0%,100%{box-shadow:0012px#4FC3F7,0024pxrgba(79,195,247,0.6),0040pxrgba(79,195,247,0.3)}50%{box-shadow:0018px#4FC3F7,0036pxrgba(79,195,247,0.8),0060pxrgba(79,195,247,0.5)}}</style></head><body><divclass="naruto"><divclass="chakra"></div><divclass="body"><divclass="hair"><divclass="spike s1"></div><divclass="spike s2"></div><divclass="spike s3"></div><divclass="spike s4"></div><divclass="spike s5"></div><divclass="spike s6"></div><divclass="spike s7"></div></div><divclass="headband"><divclass="plate"><divclass="konoha"></div></div></div><divclass="face"><divclass="eye left"><spanclass="shine"></span></div><divclass="eye right"><spanclass="shine"></span></div><divclass="whisker left"><span></span><span></span><span></span></div><divclass="whisker right"><span></span><span></span><span></span></div><divclass="mouth"></div></div><divclass="zip"></div><divclass="arm left"></div><divclass="arm right"><divclass="rasengan"></div></div><divclass="legs"><divclass="leg left"><divclass="sandal"></div></div><divclass="leg right"><divclass="sandal"></div></div></div></div><divclass="shadow"></div></div></body></html>实现思路拆分
纯 CSS 绘制的 Q 版漩涡鸣人，配合关键帧动画实现漂浮、挥臂与螺旋丸效果。
一、项目概述
| 目标 | |
| 风格 | |
| 动效 |
二、整体实现策略
页面居中 └── .naruto（角色容器 180×260） ├── .chakra 查克拉光环（底层装饰） ├── .body 身体主体（肤色 + 橙色衣服一体块） │ ├── .hair + .spike×7 刺猬金发 │ ├── .headband + .plate + .konoha 木叶护额 │ ├── .face（眼、须、嘴） │ ├── .zip 衣服拉链 │ ├── .arm×2 双臂（右手的 .rasengan） │ └── .legs + .leg×2 + .sandal 腿与凉鞋 └── .shadow 地面椭圆阴影核心思路：
一块 .body搞定躯干：上半圆角矩形 + 纵向渐变，42% 处从肤色#FFDBAC切到忍者服#FF6600，减少嵌套。局部绝对定位叠层：头发、护额、脸、手臂、腿均 position: absolute，用z-index控制前后关系。重复元素用类名区分：7 根 .spike共用基础样式，.s1～.s7只改left、height、rotate。伪元素补细节：瞳孔（ .eye::after）、拉链头（.zip::before）、螺旋丸内外圈（.rasengan::before/::after）、凉鞋纹路（.sandal::after）。动画统一 4s 周期： float、arms-left/right、shadow在 40% 关键帧对齐，形成「跳起—挥臂—阴影缩小」的联动。
三、HTML 结构拆分
.naruto | ||
.chakra | ||
.body | ||
.hair.spike.s1～s7 | ||
.headband.plate > .konoha | ||
.face | ||
.eye.shine | ||
.whiskerspan | ||
.zip | ||
.arm.left/right | ||
.rasengan | ||
.legs.leg > .sandal | ||
.shadow |
四、各模块 CSS 实现要点
4.1 页面与场景
body：flex水平垂直居中，height: 100vh。背景： radial-gradient深蓝夜空感（#1a2744→#0d1117）。overflow: hidden避免动画溢出滚动条。
4.2 身体 .body
尺寸 160×210，水平margin: 0 auto。圆角策略：顶部 80px大圆角形成圆脸轮廓；底部16px小圆角作下摆。渐变分界： linear-gradient，42%为领口/衣服分界线（与护额、脸部top值配合）。动画： animation: float 4s ease infinite，整体上下位移。
4.3 刺猬头 .hair / .spike
.hair置于top: -38px，宽于身体，露出在头顶外。每根 .spike：窄矩形 +border-radius: 50% 50% 0 0→ 上尖下宽的「刺」。transform-origin: bottom center，以底部为轴rotate，中间高、两侧矮，模拟鸣人标志性发型。
4.4 木叶护额 .headband
深蓝横条 #1A3A6B，z-index: 4压在头发之上。.plate：居中金属牌，linear-gradient灰白 +flex居中放标志。.konoha：不用图片，用border画圆环并隐藏右上边，再rotate(-45deg)近似木叶漩涡符号。
4.5 面部 .face
| 眼睛 | border；::after 蓝色虹膜；.shine 小白点高光 |
| 间距 | .eye.leftmargin-right: 30px 拉开双眼 |
| 嘴巴 | border-radius 组合成咧嘴弧形，#333 填充 |
| 猫须 | .whisker 用 flex-direction: column；每根 span 为 2px 高横线，:nth-child 微调 rotate 与 width |
4.6 拉链 .zip
居中 4px宽竖条。::before在底部画银色拉链头，增强衣服细节。
4.7 手臂 .arm
绝对定位在 top: 118px，橙色与衣服同色#FF6600。形状： border-radius: 60% 100%/100% 60%做出左右不同的椭圆「袖子」。左臂 left: -4px，右臂right: -58px向右伸出，为螺旋丸留空间。arms-left/arms-right在浮动至高点（40%）时角度略收，模拟挥臂。
4.8 螺旋丸 .rasengan
radial-gradient由中心白到外围深蓝，模拟能量球。多层 box-shadow+rasengan-glow呼吸式发光。rasengan-spin整体旋转；::before、::after虚线/实线圆环反向旋转，层次更丰富。
4.9 腿部 .legs / .sandal
.legs：display: flex+gap: 16px，top: 100%接在身体下缘。.leg橙色矩形 + 底部小圆角；.sandal黑色宽椭圆作鞋底，::after横线作鞋面纹理。
4.10 查克拉光环 .chakra
大椭圆 border+ 内外box-shadow，半透明蓝色。chakra-pulse：透明度与scale(1.05)脉动，z-index: 0在身体后面。
4.11 阴影 .shadow
底部宽椭圆 rgba(0,0,0,0.4)。shadow动画：角色上浮时阴影scale(0.5)，增强空间感。
五、动画时间轴（4s 一周期）
螺旋丸使用独立周期：rasengan-spin 1.2s、inner-spin 0.8s / 1.5s，与身体 4s 不同步，显得能量更活跃。
六、层级（z-index）一览
.chakra | |
.body | |
.face | |
.hair | |
.headband |
手臂、腿在 body 内部按 DOM 顺序叠放，未单独设 z-index。
七、色彩参考
#FFDBAC | |
#FFCC00 | |
#FF6600 | |
#1A3A6B | |
#E8E8E8#A0A0A0 渐变 | |
#2196F3 | |
#4FC3F7#81D4FA、#0288D1 | |
#1a2744#0d1117 |
源码获取
