An open API service indexing awesome lists of open source software.

https://github.com/ceynri/front-end-practice

🍽 一些用来练手的 demo 小点心
https://github.com/ceynri/front-end-practice

Last synced: 2 months ago
JSON representation

🍽 一些用来练手的 demo 小点心

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