--- theme: cyanosis highlight: solarized-dark --- > 本项目使用React + Vite快速代建，之后会适配vanilla版本开箱即用。主要实现效果：鼠标悬停hover 3D视觉体验，统一UI设计，动画平滑，卡片易扩展 [codesandbox沙箱](https://codesandbox.io/p/github/601odd/yuzhiboyou/master)，[仓库](https://github.com/601odd/yuzhiboyou) 直接上效果 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dd50cad84e940e586cd41593137719c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2046\&h=1724\&s=5841719\&e=gif\&f=82\&b=181818) 因为最近在准备写简历，然后看网上要么就是word模板或者直接md文档生成pdf/word，感觉比较没意思。索性做一个在线简历，以示前端雄风、、、? 为了不涉及个人隐私就找了动漫人物宇智波鼬来练练手（小时候很喜欢😍） ## 前期准备 ### 技术选型因为项目很小，不涉及用户交互只是简单的页面展示，就选用小而巧的vite搭建 ```bash npm create vite@latest yuzhiboyou ``` 把没有用的css和测试文件删掉就开始code ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4338c27e53cb44b3ac50b8dc28787d3c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=468\&h=454\&s=42567\&e=png\&b=232323) ### 信息收集 google一下鼬的帅照因为已经好久没追火影了，宇智波鼬的好多技能都忘记了。。。。还是查一下资料 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eceeeb48430d4e6b86fcaf80352b5643~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1668\&h=1752\&s=599168\&e=png\&b=fcfafa) 梳理一下主要信息，把重复的内容抽取出来成一个单独的config配置文件，方便之后渲染按照程序员写技术了解程度的惯词（~~精通~~，擅长，熟悉，了解）来描述宇智波鼬的忍术🫰 ```jsx const config = { baseInfo: [ '生日：6月9日（双子座）', '等级：暗部B级、S级叛忍', '忍者登记号码：012110', '兴趣：逛甜品屋、回想以前愉快的事情', ], resume: [ { name: '木叶忍者', intro: '木叶村的天才 | 六岁 ~ 十岁', details: [ '七岁以第一名的成绩从忍者学校毕业（六岁入学）', '八岁时因目睹带土杀光他的同伴而开启写轮眼', '十岁晋升为中忍，被誉为为“天才忍者”', ], }, { name: '暗部', intro: '担任暗部分队长 | 十岁 ~ 十三岁', details: ['守卫木叶村安宁', '为顾全大局同宇智波带土灭族，唯独留下弟弟佐助'], }, { name: '晓组织成员', intro: '为保护木叶以间谍加入晓组织 | 十三岁 ~ 二十一岁', details: [ '为晓组织献身但未真正捕捉尾兽', '协助佐助觉醒万花筒写轮眼', '在世界大战中作出重大贡献', ], }, ], skills: [ '万花筒血轮眼', '天照', '须佐能乎', '豪火球之术', '鸦分身之术', '豪龙火之术', '水龙弹之术', '影分身之术', '月读', '幻术', ], skillStack: [ '精通血继结界如万花筒写轮眼（天照，伊邪那美，须佐能乎，八坂勾玉）', '精通火遁忍术例如凤仙火之术豪火球之术凤仙花爪红豪龙火之术豪焰球', '擅长封印型转写封印别天神', '擅长组合忍术天照·二重须佐能乎·双神雷临凌乱雪月花', '熟悉辅助型忍术熟悉的有鸦分身之术分身大爆破影分身之术水分身之术替身术', '了解水遁忍术例如水牙弹水龙弹之术', ], chakras: ['风', '火', '水', '阴', '阳'], } export default config ``` ## resume结构设计简历主要分左右俩大板块，左边是人物图像和基本信息，右边是五个卡片card组成的人物细节描述 ### 左部分jsx结构 ```jsx import imgUrl from './img/Yuzhi-Wave-Weasel.jpg' export default function Resume(){ return (

宇智波鼬うちはイタチ

宇智波一族晓组织

火之国·木叶隐村

宇智波佐助的兄长，特征是黑色长发，从近鼻翼的眼角延伸至眼下的深邃纹路（泪沟），代表「朱雀」的「朱」字戒指，佩戴在右手无名指上，脖子戴有项链。为人沉着冷静，天资聪颖的他，五岁就将家族基本忍术：「火遁」豪火球之术一学就会，七岁以第一名的成绩从忍者学校毕业（六岁入学），八岁时因目睹带土杀光他的同伴而开启写轮眼，十岁晋升为中忍，被称为「天才忍者」，十三岁就当上暗部分队长，是家族的骄傲。不料却突然在一个晚上之内将家族几乎全灭后，离开木叶成为叛忍，并加入「晓」（实则是为了保护木叶而加入晓作为间谍）。他的弟弟宇智波佐助成为家族中唯一的活口，自始不惜一切以杀死他为目标，为族人复仇。

基本信息

{config.baseInfo.map((item, index) => ( {item} ))}

)} ``` ### css和框架 #### css基本样式 * 将默认浏览器css重置确定简历基本色调 * grid实现响应式俩栏布局 * media实现移动端适配 * `grid-template-columns: 320px 1fr;`当屏幕宽度大于 768px 时，main 元素的列布局将改为两列。左边的的宽度为 320px，右边的宽度使用剩余空间（1fr）,小于768px则是一列 ```css *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { line-height: 1.4; font-weight: 420; font-family: 'DM Sans', sans-serif; background-color: #0f0f0f; color: #e4dcdc; } main { max-width: 1000px; margin: 0 auto; padding: 2rem; display: grid; gap: 2rem; } img { display: block; max-width: 100%; height: 100%; } h1,h2,h3,h4,h5,h6 { color: white; font-weight: 700; } text { font-size: small; } @media (min-width: 768px) { main { grid-template-columns: 320px 1fr; } } ``` 效果展示 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/229d71a008404d4d9a04b5cde2b02356~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1860\&h=1768\&s=998302\&e=png\&b=101010) #### card样式 * 首次加载动画 * entry关键帧从小到大透明到透明 * 缓动函数ease 从慢到快再从快到慢 * card 背景图像 * 用伪元素before来定位 * `background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));` * 120deg：从左上角向右下角渐变 * 从第二个参数颜色渐变到第三个参数 ```css .card { padding: 1.5rem; border-radius: 2rem; position: relative; box-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1); overflow: hidden; animation: entry 1s ease; } .card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); opacity: 0.25; border-radius: 2rem; } @keyframes entry { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e77ce264db34175978a37b7d00c90eb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2092\&h=2367\&s=1135983\&e=png\&b=111111) ### a标签动画实现效果 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2bd5c55b90e4d60a7d5b445b633b270~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=560\&h=418\&s=321651\&e=gif\&f=54\&b=171717) * 当悬停于a标签时，伪元素before显现`opacity: 1;` * 在a标签之前显示选中图标'>' （伪元素before实现） * `transition: padding-left 0.2s ease, color 0.2s ease;`：链接文本的左内边距和颜色会以0.2秒的时间以 "ease" 缓动函数的方式进行平滑过渡 ```css a { color: #9f4941; text-decoration: none; padding-left: 0.2rem; display: block; position: relative; transition: padding-left 0.2s ease, color 0.2s ease; } a::before { content: '>'; position: absolute; bottom: 0; left: 0; opacity: 0; color: white; transition: opacity 0.2s ease; } a:hover { color: hotpink; padding-left: 1.2rem; } a:hover::before { opacity: 1; } ``` ### 左部分-- 人物图像3D设计参照 [codepen](https://codepen.io/onediv/pen/BprVzp)的实现 1. `.reflection-grid-cell-#{( ($r*10) + $c - 10)} { top: ($r * 10%)-10%; left: ($c * 10%)-10%; }`通过sass中的双重循环，分别用于$r（行）和$c（列）标记一个10\*10的网格，并分别设置类名reflection-grid-cell-\[1,2,3...] 在图像之上（z-index）均匀分布100个行内标签，当然也可以更加颗粒 2. `transform: rotateX((($r * -5)+45deg)) rotateY((-45deg+ ($c * 5))`;监听每个标签的hover属性，悬停时会变换X，Y轴坐标使产生3D效果。这里的旋转角度基于$r和$c的值，是动态的 3. `&:before：{transform: translateY(45-(5% * $r));}`设置伪元素的垂直位移，根据\$r伪元素将产生垂直位移效果 #### fragment code ```jsx const ImgCard = () => { return (

{Array.from({ length: 100 }, (_, cell) => ( ))}

) } ``` ```scss .reflection-container { position: relative; display: inline-block; vertical-align: middle; transform-style: preserve-3d; perspective: 1000px; height: 100%; .reflection-content { height: 50vh; width: 90vw; background-size: cover; background-position: center; transform: rotateX(0) rotateY(0); pointer-events: none; transition: 100ms linear transform; overflow: hidden; } .reflection-grid-cell { position: absolute; z-index: 1; width: 10%; height: 10%; } @for $r from 1 to 11 { @for $c from 1 to 11 { .reflection-grid-cell-#{( ($r*10) + $c - 10)} { top: ($r * 10%)-10%; left: ($c * 10%)-10%; } .reflection-grid-cell-#{( ($r*10) + $c - 10)}:hover ~ .reflection-content { transform: rotateX((($r * -5)+45deg)) rotateY((-45deg+ ($c * 5))); &:before { transform: translateY(45-(5% * $r)); } } } } } ``` ### 右部分卡片信息样式 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3053e9be5ab478c962afe95c9fa1a17~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1064\&h=920\&s=227111\&e=png\&b=181818) * h4之下有个a标签，可以复用上面提到的a标签样式 * `list-style-type: disclosure-closed;` ul的标签样式选择图中的的实心大于符号 * `.info .card.red::after{}`给每个card右上角加不同颜色的书签页样式 #### jsx和相关css代码片段 ```jsx

人生履历

{config.resume.map(item => (

{item.name}

{item.info}

{item}

))}

教育经历

忍者学校

GPA：4.9（5.0）

国家级奖学金 * 3 , 获ACM世界总决赛金牌

同龄人中的佼佼者
不到一年晋升中忍

``` ```css .block + .block { margin-top: 1rem; } .block ul { font-weight: 300; } .block p { color: white; } ul { padding-left: 1rem; list-style-type: disclosure-closed; } .info .card + .card { margin-top: 2rem; } ul.pills { list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; } ul.pills > li { background-color: #534f4f; border-radius: 1rem; padding: 0.25rem 0.75rem; color: white; font-size: 0.8rem; display: block; } .info .card::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 4rem 4rem 0; position: absolute; right: 0; top: 0; } .info .card.red::after { border-color: transparent red transparent transparent; } .info .card.orange::after { border-color: transparent orange transparent transparent; } .info .card.pink::after { border-color: transparent pink transparent transparent; } .info .card.green::after { border-color: transparent limegreen transparent transparent; } .info .card.teal::after { border-color: transparent turquoise transparent transparent; } ``` 做完一个card卡片样式其他的就是粘贴复制按需增删改一下样式就ok辽🤓 如果对你的简历写法有帮助的话可以点赞收藏哦😉 ## 总结 * 多看多尝试比较有视觉冲击的设计(codepen，css tricks，codrops)，思想不要被固化 * 能用css做就尽量不用js（3D card） * 多考虑样式的可复用性 jsx尽量写简洁易懂，配置信息另存文件 ## 参考 * *

宇智波鼬 うちはイタチ