mouday/front-end-demo

front-end-demo

Front End Demo

一些前端代码 demo

• 开原地址：https://github.com/mouday/front-end-demo
• 演示地址：https://mouday.github.io/front-end-demo/

全部示例

1、scroll-snap 滚动贴合示例

2、无缝轮播实现原理

3、animate.css 和 wow.js 实现网页动画效果

4、swiper.js 叠加轮播图

5、Json 数据转换

6、debounce 防抖

7、throttle 节流

8、animation@keyframes 实现 CD 播放效果

9、托尼老师理发店门口的灯柱子

10、canvas 示例-刮刮乐

11、canvas 示例-时钟

12、canvas 示例-画板

13、Canvas 绘制圆角头像

14、一行上不同大小的文字上下居中对齐

15、selection 自定义用户选中部分颜色

16、监听浏览器 scroll 滚动事件,触顶和触底

• 16.1、监听浏览器 scroll 滚动事件,触顶和触底
• 16.2、监听元素 scroll 滚动事件,触顶和触底

17、文字模糊样式

18、CSS 层级小技巧：在滚动时自动添加头部阴影

19、requestAnimationFrame 实现浏览器动画

20、添加事件监听 addEventListener、移除事件监听 removeEventListener

21、监听鼠标按下键盘事件

22、Video 封面样式

23、实现 1px 的细线

24、实例：摆动的小球（钟摆效果）

25、File 和 Base64（DataURL）互相转换

26、阅读进度条

27、css：利用伪类处理图片加载失败的样式问题

28、文件上传工具

29、border-radius 示例

30、tailwindcss 示例

31、table-border 表格边框

32、MutationObserver监听DOM节点变化

33、ResizeObserver监听DOM节点变化

34、自定义鼠标右键菜单

35、transition过渡

36、animation动画

37、CSS 实现 hover 时文字波浪式变色效果

38、CSS 线性渐变 linear-gradient

39、隐藏移动端的滚动条

40、tab切换线条跟随效果

41、旋转元素 transform-rotate

42、旋转动画 transform-rotate

43、水平垂直居中

44、CSS实线边框loading动画实例页面