# gitee-funcss

**Repository Path**: ctrl-S/gitee-funcss

## Basic Information

- **Project Name**: gitee-funcss
- **Description**: 一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助。
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://funcss.liujueyi.cn
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 3
- **Created**: 2020-12-01
- **Last Updated**: 2025-08-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: funcss, CSS, HTML

## README

## FUNCSS
CSS Demo，为学习者获取灵感和思路提供一点帮助。

[![主页](https://img.shields.io/badge/FUNCSS-%E4%B8%BB%E9%A1%B5-black
)](https://funcss.liujueyi.cn)
[![创作折](https://img.shields.io/badge/Author-Just.%20Liu-blue
)](https://www.liujueyi.cn)
[![star](https://gitee.com/ctrl-S/gitee-funcss/badge/star.svg?theme=dark)](https://gitee.com/ctrl-S/gitee-funcss)
[![fork](https://gitee.com/ctrl-S/gitee-funcss/badge/fork.svg?theme=dark)](https://gitee.com/ctrl-S/gitee-funcss)
[![公众号](https://img.shields.io/badge/%E5%85%AC%E4%BC%97%E5%8F%B7-%E8%AE%BE%E8%AE%A1%E5%B8%88%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%B8%B8-green?logo=wechat&logoColor=green)](https://mp.weixin.qq.com/s/2COfAswdC9DIlSrocqJgjw)


### Demo目录
- 01 好看的呼吸灯效果
- 02 鼠标悬浮，线条动态变化
- 03 圆点水波纹效果
- 04 第一个字符串生成文字图标
- 05 按钮文字上下滑动
- 06 css3 loading
- 07 动态的毛玻璃背景
- 08 简约的动态关注按钮
- 09 输入框选中交互动效
- 10 多彩变化的按钮
- 11 旋转的太极图
- 12 新拟态输入框
- 13 搜索框小动效
- 14 简约大方的输入框
- 15 一直动的按钮
- 16 汉堡菜单按钮
- 17 文字加载动画效果
- 18 聚光灯效果
- 19 弹跳的圆
- 20 动态的波纹字
- 21 好看的网格阴影文字
- 22 旋转的金币
- 23 闪烁的霓虹灯文字
- 24 故障字体效果
- 25 一串乱码
- 26 加载的圆
- 27 鼠标滚动小动效
- 28 输入框交互
- 29 圆点交互按钮
- 30 文字上下滑动按钮
- 31 呼吸灯按钮
- 32 新拟态按钮
- 33 好看的开关按钮
- 34 暗黑模式切换开关
- 35 提示文字跳起来的输入框
- 36 wins98 复古按钮
- 37 音频小动效
- 38 渐变加载条
- 39 图片懒加载小动效
- 40 乱转的指北针
- 41 颜色滑动切换按钮
- 42 多弧形加载动画
- 43 丝滑的加载条动画
- 44 文字下划线条动画按钮
- 45 旋转的设置按钮
- 46 爱心点赞按钮
- 47 暗黑模式切换按钮
- 48 旋转的正方体
- 49 太极八卦图
- 50 动态雷达扫描
- 51 打字机动画效果
- 52 好看的晶体悬浮效果
- 53 水波纹加载效果
- 54 卡片翻转效果
- 55 文字隐身术
- 56 背景收缩动画按钮
- 57 文字跑马灯按钮
- 58 引导式详情按钮
- 59 牛顿摆
- 60 边框动效按钮
- 61 勾选动效多选框
- 62 动态勾选多选框效果
- 63 变幻的按钮
- 64 两个圆形加载效果
- 65 移形换位加载动画
- 66 圆形背景动效多选框
- 67 加减动态多选框
- 68 水波纹按钮
- 69 双开门按钮
- 70 列表块加载动效
- 71 文字流光效果
- 72 拉链式展开按钮
- 73 跷跷板加载动画
- 74 多重阴影按钮
- 75 上下线条左右滑动按钮
- 76 圆形金属质感按钮
- 77 搜索输入框动效
- 78 日夜间切换开关
- 79 代码瀑布加载动画
- 80 悬停代码小瀑布按钮
- 81 打字机动效按钮
- 82 圆形渐变光晕动效
- 83 渐隐式按钮
- 84 动态箭头导航栏
- 85 立体点击按钮
- 86 科技感发光按钮
- 87 动态发光文字效果
- 88 运送货物的小货车
- 89 好看的倒影按钮
- 90 个性立体按钮
- 91 流光边卡片块
- 92 简约文字风格导航栏
- 93 滑块动效导航栏
- 94 多彩的文字效果
- 95 旋转的圆环按钮
- 96 黑色质感科技开关
- 97 正在充电状态
- 98 多选立体标签按钮
- 99 好玩的黑洞效果
- 100 绿色邮筒口动态输入框
- 101 万花筒加载动画
- 102 硬投影动效输入框
- 103 点击加1效果动效按钮
- 104 弥散背景按钮
- 105 翻盖效果按钮
- 106 彩虹边按钮
- 107 流光圆形按钮
- 108 好看的动感流星按钮
- 109 流边动效质感按钮
- 110 游戏启动按钮
- 111 小人吃豆豆加载动画
- 112 小巧好看的水晶按钮
 

---

### 在线站点
#### [有趣的CSS](https://funcss.liujueyi.cn)

---

### 公众号
![](/wxgzh.png)  
这里是「 设计师工作日常 」,记录分享有关UI设计和前端方面的文章、教程，求关注

---

### 电报群：
#### [设计师工作日常](https://t.me/designer_work_time)
野蛮生长，喜爱设计，还嗑点代码，币圈韭菜...一名UI设计师的日常精神世界，欢迎莅临...