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)

![ife-demo.gif](https://i.loli.net/2019/11/12/JkjLevPYAErUNMO.gif)

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

![flex-gallery.gif](https://i.loli.net/2019/10/20/ZdIhac731tEyQYW.gif)




## Card

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

![layed-suspension.gif](https://i.loli.net/2019/10/13/DU6VlXijBgbqsyt.gif)

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

![picture-card.gif](https://i.loli.net/2019/10/19/qBlTefQOL29on1V.gif)




## Button

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

![hover-button.gif](https://i.loli.net/2019/11/12/TjUqz7CQA8SRpgh.gif)

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

![dynamic-search-box.gif](https://i.loli.net/2019/10/19/ZfNIvq1BOueShAr.gif)

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

![Flat-login-button.gif](https://i.loli.net/2019/10/20/oPTvAXkMOD41QwV.gif)




## Loader

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

![bubbles-loader.gif](https://i.loli.net/2019/10/13/Ezmo5FNUhQeVR7I.gif)

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

![stairs-loader.gif](https://i.loli.net/2019/11/12/vkiZcexo9gsSnpO.gif)

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

![rainbow-loader.gif](https://i.loli.net/2019/10/13/Yo4xgtRiUBjQNIK.gif)

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

![flying-man-loader.gif](https://i.loli.net/2019/10/13/CFUw3xBz7vtiRJD.gif)

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

![code-loader.gif](https://i.loli.net/2019/10/13/fYPXKIgv1mF4srD.gif)




## Data Visualization

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

![visualization.gif](https://i.loli.net/2020/03/09/wx3a8jJ2guKR9NI.gif)




## 参考

*注：原示例基本无注释，且可能与本仓库的实现略有出入。部分网站需要科学上网*

- 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