https://github.com/ceynri/front-end-practice
🍽 一些用来练手的 demo 小点心
https://github.com/ceynri/front-end-practice
Last synced: 2 months ago
JSON representation
🍽 一些用来练手的 demo 小点心
- Host: GitHub
- URL: https://github.com/ceynri/front-end-practice
- Owner: ceynri
- Created: 2019-10-02T15:45:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-09T09:00:54.000Z (over 5 years ago)
- Last Synced: 2025-02-13T07:15:34.210Z (4 months ago)
- Language: CSS
- Homepage:
- Size: 29.8 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 前端动效小练习
慢慢写
代码做了详细的面向新手的注释,**点击`📃`直接阅读源码,点击`标题`预览效果**。
注:
- 目前大部分样例都是纯 HTML + CSS,少部分样例会添加简单的 JS 代码。
- 在线预览效果目前已搬运至个人服务器上,保障了国内访问速度。
- 由于gif图色彩数限制,渐变效果在Gif图上表现较差,以实际样例为准。
## Layout
- [📃](layout/IFE-day12-15/) | [百度前端技术学院 - 第十二天到第十五天,复杂页面实现 Demo](https://ceynri.cn/demo/layout/IFE-day12-15/index.html)

- [📃](layout/FlexGallery/) | [响应式布局的相册页](https://ceynri.cn/demo/layout/FlexGallery/flex-gallery.html)

## Card
- [📃](card/SuspendedLayer/) | [图片3D分层悬浮效果](https://ceynri.cn/demo/card/SuspendedLayer/suspended-layer.html)

- [📃](card/PictureCard/) | [带浮动按钮卡片式图片](https://ceynri.cn/demo/card/PictureCard/picture-card.html)

## Button
- [📃](button/HoverButton/) | [简单的hover效果按钮](https://ceynri.cn/demo/button/HoverButton/hover-button.html)

- [📃](button/DynamicSearchBox/) | [动态伸缩搜索框](https://ceynri.cn/demo/button/DynamicSearchBox/dynamic-search-box.html)

- [📃](button/FlatLoginButton/) | [扁平化动画加载按钮](https://ceynri.cn/demo/button/FlatLoginButton/flat-login-button.html)

## Loader
- [📃](loader/BubblesLoader) | [浮动气泡加载动画](https://ceynri.cn/demo/loader/BubblesLoader/bubbles-loader.html)

- [📃](loader/StairsLoader) | [阶梯小球加载动画](https://ceynri.cn/demo/loader/StairsLoader/stairs-loader.html)

- [📃](loader/RainbowLoader) | [彩虹旋转加载动画](https://ceynri.cn/demo/loader/RainbowLoader/rainbow-loader.html)

- [📃](loader/FlyingManLoader) | [飞行小人加载动画](https://ceynri.cn/demo/loader/FlyingManLoader/flying-man-loader.html)

- [📃](loader/CodeLoader) | [{...} 加载动画](https://ceynri.cn/demo/loader/CodeLoader/code-loader.html)

## Data Visualization
- [📃](visualization/course-assignment) | [我的数据可视化课程大作业](https://ceynri.cn/demo/visualization/course-assignment/visualization.html) (代码较为久远,仅供参考)

## 参考
*注:原示例基本无注释,且可能与本仓库的实现略有出入。部分网站需要科学上网*
- Layout
- [响应式布局的相册页](https://www.youtube.com/watch?v=mkqRpPdnggw) @DarkCode
- [百度前端技术学院 - 第十二天到第十五天,复杂页面实现](http://ife.baidu.com/course/detail/id/44) @ife
- Card
- [图片3D分层悬浮效果](https://www.youtube.com/watch?v=WF68FcI21es) @Online Tutorials
- [带浮动按钮卡片式图片](https://www.youtube.com/watch?v=b8e6D7oBf4g) @DarkCode
- Button
- [简单的hover效果按钮](https://www.youtube.com/watch?v=MLfAW55_4cY) @DarkCode
- [动态伸缩搜索框](https://www.youtube.com/watch?v=v1PeTDrw6OY) @DarkCode
- [扁平化动画加载按钮](https://www.bilibili.com/video/av58709312) @前端实验室
- Loader
- [浮动气泡加载动画](https://codepen.io/CKH4/pen/ZGNyep/) @CKH4
- [阶梯小球加载动画](http://codepen.io/ispal/pen/mVaaJe/) @ispal
- [彩虹旋转加载动画](https://codepen.io/jackrugile/pen/JddmaX/) @jackrugile
- [飞行小人加载动画](https://codepen.io/mr_alien/pen/FDLjg) @mr_alien
- [{...} 加载动画](http://codepen.io/depy/pen/Gqtwv/) @depy