# css-effects

**Repository Path**: mpbillion/css-effects

## Basic Information

- **Project Name**: css-effects
- **Description**: ⭐ 收集平时工作和学习中的css特效，持续更新。喜欢的话就Star一下吧！
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://gitee.com/sunyctf/css-effects
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-12-12
- **Last Updated**: 2024-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 在线预览

[![前端](https://raw.githubusercontent.com/sunyctf/css-effects/main/images/qcode.gif "前端")](https://sunyctf.github.io/css-effects/)

## 仓库介绍

前端css特效—front-end-css-effects，如果你喜欢的话就Star 一下吧！

希望和大家，相互学习，互相交流，一起探讨，共同进步！

## 内容目录

- [CSS特效](#other)
- [边框特效](#border)
- [导航栏设计](#navbar)
- [404page](#404page)
- [按钮特效](#button)

### other

1. [css3动画大风车](https://sunyctf.github.io/css-effects/other/css3动画大风车.html)
2. [css3太极动画-0](https://sunyctf.github.io/css-effects/other/css3太极动画-0.html)
3. [css3太极动画-1](https://sunyctf.github.io/css-effects/other/css3太极动画-1.html)
4. [css3太极鼠标触发旋转](https://sunyctf.github.io/css-effects/other/css3太极鼠标触发旋转.html)
5. [css3渐变色动画边框](https://sunyctf.github.io/css-effects/other/css3渐变色动画边框.html)
6. [css3电视动画模型](https://sunyctf.github.io/css-effects/other/css3电视动画模型.html)
7. [css3小黄人](https://sunyctf.github.io/css-effects/other/css3小黄人.html)
8. [css3新拟态鼠标经过特效](https://sunyctf.github.io/css-effects/other/css3新拟态鼠标经过特效/index.html)
9. [css3鼠标悬停图片展示效果](https://sunyctf.github.io/css-effects/other/css3鼠标悬停图片展示效果/index.html)
10. [css3文字弹跳](https://sunyctf.github.io/css-effects/other/css3文字弹跳/index.html)
11. [css3鼠标悬停发光菜单](https://sunyctf.github.io/css-effects/other/css3鼠标悬停发光菜单/index.html)
12. [css3实现地球自转](https://sunyctf.github.io/css-effects/other/css3实现地球自转/index.html)
13. [css3餐饮行业精美蒙版动画](https://sunyctf.github.io/css-effects/other/css3餐饮行业精美蒙版动画/index.html)
14. [极简大气css3卡片悬停效果](https://sunyctf.gitee.io/css-effects/other/css3卡片悬停效果/index.html)
15. [css3天空云层动态特效](https://sunyctf.github.io/css-effects/other/css3天空云层动态特效/index.html)
16. [css3可爱的恐龙夫妇](https://sunyctf.github.io/css-effects/other/css3可爱的恐龙夫妇/index.html)
17. [css3鼠标悬停图像高亮放大](https://sunyctf.gitee.io/css-effects/other/css3鼠标悬停图像高亮放大/index.html)
18. [css3鼠标悬停图片特效](https://sunyctf.github.io/css-effects/other/css3鼠标悬停图片特效/index.html)
19. [css3登录注册表单切换效果](https://sunyctf.github.io/front-end-demos/css-effects/other/css3登录注册表单切换效果/index.html)
20. [css3滚动显示页面](https://sunyctf.github.io/css-effects/other/css3滚动显示页面/index.html)
21. [css3旅游画廊悬停放大动画](https://sunyctf.github.io/css-effects/other/css3旅游画廊悬停放大动画/index.html)
22. [css3实现3D文字阴影](https://sunyctf.github.io/css-effects/other/css33D文字阴影/index.html)
23. [css3图片淡入动画](https://sunyctf.github.io/css-effects/other/css3图片淡入动画/index.html)
24. [css折叠图像效果](https://sunyctf.github.io/css-effects/other/css3折叠图像/index.html)
25. [鼠标悬停切换动画](https://sunyctf.github.io/css-effects/other/鼠标悬停切换动画/index.html)
26. [css3玻璃变形按钮悬停发光](https://sunyctf.github.io/css-effects/other/css3玻璃变形按钮悬停发光/index.html)
27. [css3鼠标悬停图片扩展显示特效](https://sunyctf.github.io/css-effects/other/css3鼠标悬停图片扩展显示特效/index.html)
28. [精美图像画廊悬停特效](https://sunyctf.github.io/css-effects/other/精美图像画廊悬停特效/index.html)
29. [卡片互动悬停下载动画](https://sunyctf.github.io/css-effects/other/卡片互动悬停下载动画/index.html)
30. [css3故障风格文字动画](https://sunyctf.github.io/css-effects/css3故障风格文字动画/index.html)
31. [css3透视按钮悬停效果](https://sunyctf.github.io/css-effects/other/css3透视按钮悬停效果/index.html)
32. [悬停放大的图片蒙版效果](https://sunyctf.github.io/css-effects/other/悬停放大的图片蒙版效果/index.html)
33. [css3新年快乐网页动画](https://sunyctf.github.io/css-effects/other/css3新年快乐网页动画/index.html)
34. [css3光标闪烁动态输入打字动画](https://sunyctf.github.io/css-effects/other/css3光标闪烁动态输入打字动画/index.html)
35. [css3类DNA细胞预加载动画](https://sunyctf.github.io/css-effects/other/css3类DNA细胞预加载动画/index.html)
36. [css3母亲节寄语文字动画](https://sunyctf.github.io/css-effects/other/css3母亲节寄语文字动画/index.html)
37. [HTML5模拟手电筒照明效果](https://sunyctf.github.io/css-effects/other/HTML5模拟手电筒照明效果/index.html)
38. [css3炫酷文字字体动画](https://sunyctf.github.io/css-effects/other/css3炫酷文字字体动画/index.html)
39. [css3母亲节背景动画](https://sunyctf.github.io/css-effects/other/css3母亲节背景动画/index.html)
40. [css3弹性卡通怪物上下跳动](https://sunyctf.github.io/css-effects/other/css3弹性卡通怪物上下跳动/index.html)
41. [css3流星雨划过动画](https://sunyctf.github.io/css-effects/other/css3流星雨划过动画/index.html)
42. [css3实现星空动画](https://sunyctf.github.io/css-effects/other/css3实现星空动画/index.html)
43. [css3夜空北斗七星闪烁动画](https://sunyctf.github.io/css-effects/other/css3夜空北斗七星闪烁动画/index.html)
44. [css3节日折叠卡片](https://sunyctf.github.io/css-effects/other/css3节日折叠卡片/index.html)
45. [css3气泡交叉游动网页加载图标](https://sunyctf.github.io/css-effects/other/css3气泡交叉游动网页加载图标动画/index.html)
46. [3D镂空简约卡片悬停效果](https://sunyctf.github.io/css-effects/other/3d-cutout-card/index.html)
47. [css3社交媒体图标按钮悬停动画](https://sunyctf.github.io/css-effects/other/css3社交媒体图标按钮悬停动画/index.html)
48. [css3火焰文字特效](https://sunyctf.github.io/css-effects/other/css3火焰文字特效/index.html)
49. [旋转立方体特效](https://sunyctf.github.io/css-effects/other/旋转立方体特效.html)
50. [css3悬停百叶窗广告牌轮播特效](https://sunyctf.github.io/css-effects/other/css3悬停百叶窗广告牌轮播特效/index.html)
50. [css3鼠标悬停剪辑路径图像效果](https://sunyctf.github.io/css-effects/other/css3鼠标悬停剪辑路径图像效果/index.html)
50. [css3定价表单悬停动画](https://sunyctf.github.io/css-effects/other/css3定价表单悬停动画/index.html)

### border

1. [css3发光边框](https://sunyctf.github.io/css-effects/border/css3发光边框.html)
2. [css3边框跑马灯](https://sunyctf.github.io/css-effects/border/css3边框跑马灯.html)
3. [css3多组漂亮按钮边框](https://sunyctf.github.io/css-effects/border/css3多组漂亮按钮边框.html)
4. [鼠标悬停图片边框跑马灯](https://sunyctf.github.io/css-effects/border/鼠标悬停图片边框跑马灯/index.html)
5. [6种炫酷css按钮边框](https://sunyctf.github.io/css-effects/border/6种炫酷css按钮边框/index.html)
6. [css3鼠标悬停边框](https://sunyctf.github.io/css-effects/border/鼠标悬停边框/index.html)
7. [鼠标悬停边框环绕动画](https://sunyctf.github.io/css-effects/border/鼠标悬停边框环绕动画/index.html)

### navbar

1. [css3侧边展开导航栏](https://sunyctf.github.io/css-effects/navbar/css3侧边展开导航栏/index.html)
2. [css3伸缩式导航栏](https://sunyctf.github.io/css-effects/navbar/css3伸缩式导航栏/index.html)
2. [css3弹性导航下拉菜单](https://sunyctf.github.io/css-effects/navbar/css3弹性导航下拉菜单/index.html)

### 404page

1. [css3鬼步月球404页面](https://sunyctf.github.io/css-effects/404page/css3鬼步月球404页面/index.html)
1. [css3旋转边框404页面](https://sunyctf.github.io/css-effects/404page/css3旋转边框404页面/index.html)
1. [css3蜗牛404页面](https://sunyctf.github.io/css-effects/404page/css3蜗牛404页面/index.html)

### button

1. [css3粒子动效按钮](https://sunyctf.github.io/css-effects/button/css3粒子动效按钮/index.html)

## 使用说明

HTMl5、CSS3

## 安装教程

1.点击以上对应分类下的Demo预览链接

2.通过[GitHub pages](https://pages.github.com/ "去了解GitHub pages")在浏览器地址栏访问

- 我的仓库主页：https://sunyctf.github.io/css-effects/

- GitHub pages站点访问通用格式：https//github用户名.github.io/github仓库名/项目文件夹名(如果有)/html文件名

## 参与贡献

1.Fork 本仓库

2.新建 Feat_xxx 分支

3.提交代码

4.新建 Pull Request