ceynri/front-end-practice

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

前端动效小练习

慢慢写

代码做了详细的面向新手的注释，点击📃直接阅读源码，点击标题预览效果。

注：

• 目前大部分样例都是纯 HTML + CSS，少部分样例会添加简单的 JS 代码。
• 在线预览效果目前已搬运至个人服务器上，保障了国内访问速度。
• 由于gif图色彩数限制，渐变效果在Gif图上表现较差，以实际样例为准。

Layout

• 📃 | 百度前端技术学院 - 第十二天到第十五天，复杂页面实现 Demo

• 📃 | 响应式布局的相册页

Card

• 📃 | 图片3D分层悬浮效果

• 📃 | 带浮动按钮卡片式图片

Button

• 📃 | 简单的hover效果按钮

• 📃 | 动态伸缩搜索框

• 📃 | 扁平化动画加载按钮

Loader

• 📃 | 浮动气泡加载动画

• 📃 | 阶梯小球加载动画

• 📃 | 彩虹旋转加载动画

• 📃 | 飞行小人加载动画

• 📃 | {...} 加载动画

Data Visualization

• 📃 | 我的数据可视化课程大作业 （代码较为久远，仅供参考）

参考

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

• Layout
  • 响应式布局的相册页 @DarkCode
  • 百度前端技术学院 - 第十二天到第十五天，复杂页面实现 @ife
• Card
  • 图片3D分层悬浮效果 @Online Tutorials
  • 带浮动按钮卡片式图片 @DarkCode
• Button
  • 简单的hover效果按钮 @DarkCode
  • 动态伸缩搜索框 @DarkCode
  • 扁平化动画加载按钮 @前端实验室
• Loader
  • 浮动气泡加载动画 @CKH4
  • 阶梯小球加载动画 @ispal
  • 彩虹旋转加载动画 @jackrugile
  • 飞行小人加载动画 @mr_alien
  • {...} 加载动画 @depy