该仓库已归档
This Repo has been archived
这是2023年春季学期的某选修课大作业。里面用到了HTML, CSS, JavaScript的技术。
仅作技术探讨，不保证文字内容与图片的真实性！
方便起见，这里将说明文档.docx的内容转述一遍。
- 全站点使用VS Code设计与编辑，所有html与css代码为手动输入，工作量大。
- 在网站编写时查阅了大量资料与文档，学习时间长，对html的flexbox布局与css样式及伪元素有较好理解与掌握。
- 网站参考MDN Web doc设计，拥有较好无障碍基础。
- 整个网站使用了苹方字体，相较于默认的微软雅黑，苹方字体更加纤细优雅，更符合本站点的风格。并且苹方字体是商用免费字体。
- 前期使用Figma设计网站确定页面与排版风格，确定了网站主色调：亮蓝色、亮绿色和橙红色。并确定了网站将大量使用圆形、圆角矩形与药丸形元素，来增加网站亲和力。
- 网站整体采用毛玻璃拟态，配合上背景与元素使用的鲜艳纯色与几何图形，让网站简洁生动但富有质感。
- 使用js实现大部分全屏滚动动画，与站点风格配合，增加用户交互趣味性；辅以图标、图片、文本框等css小动效，观感精致，使人机交互符合直觉。
- 自定义了所有transition动画的贝塞尔曲线，比起默认缓动效果，视觉效果更加流畅优雅，富有生命力。
- 主站点统一使用平滑滚动js脚本，实现流畅的滚动效果。
- “联系我”页面使用Vanilla tilt.js实现卡片3D转动效果，交互有趣生动。
- 排版整齐，采用8px布局原理，布局清晰；大量使用flex-box，层级划分清晰，易于将站点修改为响应式。
- Project站点中所有图片均使用PS进行设计制作，让视觉风格与主站点做出区分。
图略。
站点采用中心式布局，可以从所有页面快速回到首页，并且可以在不同网页间相互跳转。
- Figma：前期设计与布局；
- Photoshop：图片设计、处理；
- CodePen：在线编辑Html、css、js；
- VSCode：本地编辑Html、css、js；
- Google Chrome：预览网站；
- OBS Studio：录屏。
这里有一个Figma设计稿截图
绝大部分参考的css与js源码都经过修改，以符合本站风格与元素。
- Web基础学习网站：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
- 头像生成：https://this-person-does-not-exist.com/en
- 主页圆圈剪切效果：https://www.youtube.com/watch?v=3rXD3jmpq9g
- Bootstrap开源SVG图标：https://icons.getbootstrap.com/
- 贝塞尔曲线生成：https://cubic-bezier.com/
- 兴趣页面三折切换效果：https://www.youtube.com/watch?v=LBAThoUn3rU&t=656s
参考源码：https://drive.google.com/file/d/1M1ZJ-z1S_wGj39KMekwAunYB4_yMHjju/view
- 兴趣页面海报无限轮播效果：https://www.bilibili.com/video/BV13a411Y7D4
参考源码：https://gitee.com/wyanhui02/html_css_demo/tree/master/code/149
- 兴趣页面竖向滚动切换效果：https://www.youtube.com/watch?v=PqdeDg9E3h8
参考源码：https://drive.google.com/drive/u/0/folders/1DIfj5UkFpaC2tq2HoH8wmTTXL_Kc0Lx6
- 联系页面倾斜卡片效果：https://www.youtube.com/watch?v=hv0rNxr1XXk
- 平滑鼠标滚动：https://ricocc.github.io/#/jslib/js-note?id=_10-%e4%bc%98%e5%8c%96%e7%bd%91%e9%a1%b5%e6%bb%9a%e5%8a%a8
- 苹方字体：https://github.com/ShmilyHTT/PingFang
- 部分免版权图片：https://www.pexels.com/zh-cn/
eof