记录我在学习前端过程中做过的小demo(都没有适配移动客户端,建议在桌面浏览器中打开),此项目会持续更新,你可以点击下面的链接查看目录
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
3dPaging
3dRotateDemo
CSSSecrets 更新 CSS 揭秘 Sep 1, 2018
Calendar update Apr 12, 2017
CanvasClip canvas 滤镜 Apr 1, 2017
GithubSearchEngine
HorizontalTimeline make it better May 24, 2017
NotesApp
PhotoShaow
Secret
TransitionDemo
VerticalTimeline
browseHappy add browse happy Apr 15, 2017
btnHover
pintu make it better May 24, 2017
README.md
aside.png
index.html
smile.png
style.css update index.html style Apr 15, 2017
实现细节记录.md

README.md

目录中的项目都可以在我的 Github 中找到,下面给出各个项目的地址。

  1. Canvas 滤镜: 在本项目的 CanvasClip 目录下

  2. HTML5音乐播放器: https://github.com/hwaphon/HTML5MusicPlayer

  3. HTML5便签小应用: https://github.com/hwaphon/Html5LocalStorage

3.1 HTML5便签小应用升级版: https://github.com/hwaphon/Html5LocalStorage

  1. Canvas 绘制图案: https://github.com/hwaphon/Html5Canvas

  2. 3D旋转演示:在本项目的 3dRotateDemo 目录下

  3. 3D翻页效果: 在本项目的 3dPaging 目录下

  4. hover 效果:在本项目的 TransitionDemo 目录下

  5. 照片折叠效果: 在本项目的 TransitionDemo 目录下

  6. 曲线阴影和翘边阴影:在本项目的 PhotoShadow 目录下(不过需要注意的是,父级设置了relative,子元素设置了absolute,且均设置了z-index属性值的时候,父级对子元素的层级有限制(即不论子元素z-index值大小,层级不“正常”显示)。如果将父级的层级设置为:z-index:auto,或者父级不设置z-index属性,则子元素的z-index不受父级限制,即正常显示。)

  7. 贝塞尔曲线实现弹性效果: 在本项目的 TransitionDemo 目录下

  8. 3D 旋转球形: 在本项目的 3dRotateDemo 目录下

  9. 3D 旋转立方体: 在本项目的 3dRotateDemo 目录下

  10. 自定义日历控件: 在本项目的 Calendar 目录下

  11. Browse Happy: 在本项目的 browseHappy 目录下

  12. 拼图游戏: 在本项目的 pintu 目录下

  13. 垂直时间轴(响应式): 在本项目的 VerticalTimeline 目录下,详情可查看博客 Building a Vertical Timeline With CSS and a Touch of JavaScript

  14. 水平时间轴(响应式+支持左滑右滑+支持左右方向键): 在本项目的 HorizontalTimeline 目录下。

  15. 使用 Vue + Vuex 实现的 Notes App. 参考地址:Learn Vuex by Building a Notes App

  16. 使用 Vue + Vuex + axios 实现的一个简单的 Github 搜索引擎,用于搜索项目。源码地址

  17. 简悦天气小程序,源码地址

  18. mpvue 开发的 ZAKER 小程序,源码地址

  19. CSS 揭秘一书中各种例子的在线展示,源码地址

  20. Wepy 开发的知乎日报小程序,源码地址

  21. 合租 TouchWeb, 源码地址