乐于分享
好东西不私藏
夜雨聆风 > > 办公文件 > 可爱的鸣人(可复制源代码)

可爱的鸣人(可复制源代码)

当前时间： 2026-08-10 22:29:57 分类：办公文件 评论(0)
可爱的鸣人(可复制源代码)

效果演示

文末可一键复制完整代码

源代码

<!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 版漩涡鸣人，配合关键帧动画实现漂浮、挥臂与螺旋丸效果。

一、项目概述

项
说明
目标
用 HTML 语义分层 + CSS 几何造型，拼出可识别的鸣人形象
风格
扁平、圆润、偏可爱（大头、简化五官与肢体）
动效
全身上下浮动、双臂摆动、脚下阴影缩放、查克拉脉动、螺旋丸旋转发光

二、整体实现策略

页面居中    └── .naruto（角色容器 180×260）            ├── .chakra        查克拉光环（底层装饰）            ├── .body          身体主体（肤色 + 橙色衣服一体块）            │     ├── .hair + .spike×7   刺猬金发            │     ├── .headband + .plate + .konoha   木叶护额            │     ├── .face（眼、须、嘴）            │     ├── .zip       衣服拉链            │     ├── .arm×2     双臂（右手的 .rasengan）            │     └── .legs + .leg×2 + .sandal   腿与凉鞋            └── .shadow        地面椭圆阴影

核心思路：

  1. 一块 .body 搞定躯干：上半圆角矩形 + 纵向渐变，42% 处从肤色 #FFDBAC 切到忍者服 #FF6600，减少嵌套。
  2. 局部绝对定位叠层：头发、护额、脸、手臂、腿均 position: absolute，用 z-index 控制前后关系。
  3. 重复元素用类名区分：7 根 .spike 共用基础样式，.s1～.s7 只改 left、height、rotate。
  4. 伪元素补细节：瞳孔（.eye::after）、拉链头（.zip::before）、螺旋丸内外圈（.rasengan::before/::after）、凉鞋纹路（.sandal::after）。
  5. 动画统一 4s 周期：float、arms-left/right、shadow 在 40% 关键帧对齐，形成「跳起—挥臂—阴影缩小」的联动。

三、HTML 结构拆分

区块
元素
作用
根容器
.naruto
限定角色宽高，承载光环、身体、阴影
氛围
.chakra
空 div，仅靠 CSS 画椭圆边框与光晕
躯干
.body
脸 + 衣服的几何母体
头发
.hair
 > .spike.s1～s7
7 个独立刺状块，便于单独旋转
护额
.headband
 > .plate > .konoha
蓝带、金属牌、木叶漩涡标
面部
.face
flex 布局排眼睛；须、嘴绝对定位
眼睛
.eye
 + .shine
白底圆 + 伪元素蓝瞳 + 高光点
猫须
.whisker
 × 3 条 span
左右各三组短线
服装
.zip
竖条 + 伪元素拉头
手臂
.arm.left/right
椭圆块伸出身体两侧
忍术
.rasengan
嵌在右臂内
下肢
.legs
 > .leg > .sandal
flex 分列双腿与鞋
投影
.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.left
 的 margin-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 一周期）

时间
float（身体）
shadow
arms
chakra / rasengan
0% / 100%
原位
阴影正常
手臂外展角度大
光环弱 / 螺旋丸常亮旋转
40%
上移 40px
阴影缩小 50%
手臂角度略收
与上浮同步
50%（仅 chakra）
—
—
—
查克拉最亮、略放大

螺旋丸使用独立周期：rasengan-spin 1.2s、inner-spin 0.8s / 1.5s，与身体 4s 不同步，显得能量更活跃。

六、层级（z-index）一览

层级
元素
0
.chakra
1
.body
2
.face
3
.hair
4
.headband

手臂、腿在 body 内部按 DOM 顺序叠放，未单独设 z-index。

七、色彩参考

用途
色值
皮肤
#FFDBAC
头发
#FFCC00
忍者服 / 手臂 / 腿
#FF6600
护额带
#1A3A6B
护额金属
#E8E8E8
 → #A0A0A0 渐变
瞳孔
#2196F3
查克拉 / 螺旋丸光
#4FC3F7
、#81D4FA、#0288D1
背景夜空
#1a2744
 → #0d1117

源码获取