一些前端代码 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 滚动事件,触顶和触底
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动画实例页面