html_css_demo/README.md

266 lines
15 KiB
Markdown
Raw Permalink Normal View History

2021-10-20 17:35:56 +00:00
# html_css_demo
#### 介绍
2021-10-20 17:37:48 +00:00
本项目包含了 HTML、CSS、JavaScript、JQuery、Vue 等相关知识和小实例,大家一起学习,一起讨论。
2022-03-24 16:00:57 +00:00
#### 备注
2022-03-24 15:59:50 +00:00
第106期及之后的小实例都在code文件夹下。
2021-10-20 17:35:56 +00:00
#### 目录
2021-10-21 07:03:40 +00:00
1. 简单又令人惊艳的hover效果表单案例
2. HTML+CSS实现3D旋转卡片
3. HTML+CSS打造伸缩式导航栏
4. 有点小酷的input输入框动画
5. HTML+CSS制作闪亮的玻璃图标悬浮效果
6. HTML+CSS制作富有弹性的导航栏标签
7. HTML+CSS制作弹性旋转菜单
8. HTML+CSS3打造的流光按钮 是不是有点小好看
9. HTML+CSS小实例之全屏导航栏菜单
10. HTML+CSS小实例之菜单悬停效果
11. HTML+CSS小实例之炫彩爱心加载特效
12. HTML+CSS小实例之粘性小球loading效果
13. HTML+CSS小实例之鼠标悬停发光按钮
14. HTML+CSS小实例之菜单栏图标悬停效果
15. HTML+CSS小实例之好玩的聚光灯文字效果
16. HTML+CSS小实例之简单又好看的加载动画效果
17. HTML+CSS小实例之有点小酷炫的菱形加载动画
18. HTML+CSS小实例之简约不简单的社交分享按钮
19. HTML+CSS小实例之有趣的沙漏加载动画
20. HTML+CSS小实例之文字裂开效果
2021-10-22 10:00:47 +00:00
21. HTML+CSS小实例之手风琴式加载动画
2021-10-24 09:17:22 +00:00
22. HTML5+CSS3小实例之分享按钮切换效果
2021-10-25 13:57:43 +00:00
23. HTML5+CSS3小实例之简单好玩的水球加载效果
2021-10-26 13:31:16 +00:00
24. HTML5+CSS3小实例之酷炫的ANIPLEX文字特效
2021-10-27 09:13:01 +00:00
25. HTML5+CSS3小实例之后台管理系统的侧边导航栏
2021-10-30 05:16:30 +00:00
26. HTML5+CSS3小实例之自定义滤镜实现液体加载动画
2021-10-30 14:00:29 +00:00
27. HTML5+CSS3小实例之3D旋转木马相册
2021-10-31 10:08:50 +00:00
28. HTML5+CSS3小实例之云朵特效按钮
2021-11-01 09:56:24 +00:00
29. HTML5+CSS3小实例之高级的转动变色加载特效
2021-11-03 09:52:58 +00:00
30. HTML5+CSS3小实例之边框滑动按钮的悬停效果
2021-11-04 10:33:01 +00:00
31. HTML5+CSS3小实例之雷达扫描特效
2021-11-05 09:37:59 +00:00
32. HTML5+CSS3小实例之毛玻璃炫光按钮
2021-11-06 09:31:28 +00:00
33. HTML5+CSS3小实例之手机充电特效
2021-11-07 09:34:40 +00:00
34. HTML5+CSS3小实例之超酷的字体发光效果
2021-11-08 09:34:35 +00:00
35. HTML5+CSS3小实例之超酷的文字滚动特效
2021-11-09 09:54:17 +00:00
36. HTML5+CSS3小实例之伸缩式动态搜索框
2021-11-10 09:19:29 +00:00
37. HTML5+CSS3小实例之JS+CSS实现日月交替效果
2021-11-11 09:46:05 +00:00
38. HTML5+CSS3小实例之3D分层按钮的悬停效果
2021-11-12 09:29:05 +00:00
39. HTML5+CSS3小实例之手机充电特效
2021-11-13 09:35:47 +00:00
40. HTML5+CSS3小实例之抽屉式相册
2021-11-14 08:45:59 +00:00
41. HTML5+CSS3小实例之发光文字悬停特效
2021-11-15 08:50:10 +00:00
42. HTML5+CSS3小实例之背景不停渐变效果
2021-11-16 09:23:34 +00:00
43. HTML5+CSS3小实例之3D轮播卡片
2021-11-17 10:18:26 +00:00
44. HTML5+CSS3小实例之炫彩流光圆环加载动画
2021-11-18 14:13:22 +00:00
45. HTML5+CSS3小实例之响应式卡片悬停效果
2021-11-19 09:34:16 +00:00
46. HTML5+CSS3小实例之波浪文字效果
2021-11-20 09:02:12 +00:00
47. HTML5+CSS3小实例之隐藏式侧边栏菜单
2021-11-21 09:26:30 +00:00
48. HTML5+CSS3小实例之3D立方体旋转相册
2021-11-22 09:45:10 +00:00
49. HTML5+CSS3小实例之3D分层图像悬停效果
2021-11-23 09:20:16 +00:00
50. HTML5+CSS3小实例之不偷看密码的超萌猫头鹰登录界面
2021-11-24 10:46:23 +00:00
51. HTML5+CSS3小实例之动感的金属质感闪光文字
2021-11-25 09:22:58 +00:00
52. HTML5+CSS3小实例之高级感满满的滚轮视差响应效果
2021-11-26 10:13:43 +00:00
53. HTML5+CSS3小实例之有趣的幽灵文字特效
2021-11-27 16:01:57 +00:00
54. HTML5+CSS3小实例之涟漪特效按钮
2021-11-28 14:50:35 +00:00
55. HTML5+CSS3小实例之酷炫的环形加载动画
2021-11-29 10:00:54 +00:00
56. HTML5+CSS3小实例之水波纹按钮效果
2021-11-30 16:39:21 +00:00
57. HTML5+CSS3小实例之背景动态变化的登录界面
2021-12-01 09:27:27 +00:00
58. HTML5+CSS3小实例之有趣的心形加载动画
2021-12-02 09:55:29 +00:00
59. HTML5+CSS3小实例之侧边导航栏
2021-12-03 10:04:59 +00:00
60. HTML5+CSS3小实例之垂直卡片滑动动画
2021-12-04 10:25:36 +00:00
61. HTML5+CSS3小实例之纯CSS实现轮播图效果
2021-12-06 16:20:27 +00:00
62. HTML5+CSS3小实例之流星划过天际的动画效果
2021-12-07 09:59:13 +00:00
63. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果竖屏
2021-12-09 10:23:17 +00:00
64. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果横屏
2021-12-10 17:07:49 +00:00
65. HTML5+CSS3小实例之纯CSS实现点赞的动画效果
2021-12-11 10:10:38 +00:00
66. HTML5+CSS3小实例之带缩略图的焦点图切换效果
2021-12-12 09:52:52 +00:00
67. HTML5+CSS3小实例之纯CSS实现一个简单的太阳系
2021-12-13 10:15:20 +00:00
68. HTML5+CSS3小实例之人物介绍卡片
2021-12-14 09:34:18 +00:00
69. HTML5+CSS3小实例之动感的环形加载动画
2021-12-15 10:16:05 +00:00
70. HTML5+CSS3小实例之图像悬停效果
2021-12-16 09:31:18 +00:00
71. HTML5+CSS3小实例之跳跃的弹性小球加载动画
2021-12-17 10:23:25 +00:00
72. HTML5+CSS3小实例之白桃粉可爱风的立体字时钟
2021-12-18 09:40:06 +00:00
73. HTML5+CSS3小实例之非常酷炫的拟物化滑动开关
2021-12-19 09:28:13 +00:00
74. HTML5+CSS3小实例之仿制网易云音乐网站的轮播图
2021-12-20 14:05:13 +00:00
75. HTML5+CSS3小实例之简约又高级的变色loading动画
76. HTML5+CSS3小实例之旋转的圣诞树
77. HTML5+CSS3小实例之滚动的方块loading动画
78. HTML5+CSS3小实例之按钮悬浮效果
79. HTML5+CSS3小实例纯CSS实现DNA双螺旋动画
80. HTML5+CSS3小实例始终飞向鼠标的纸飞机
81. HTML5+CSS3+JS小实例滑动切换的注册登录界面
82. HTML5+CSS3小实例篮球弹跳动画
2021-12-29 12:39:17 +00:00
83. HTML5+CSS3+JS小实例马赛克背景的按钮特效
84. HTML5+CSS3小实例翻书动画
85. HTML5+CSS3小实例莫比乌斯环loading动画
86. HTML5+CSS3+JS小实例滚动渐变导航栏
87. HTML5+CSS3+JS小实例逼真的玻璃卡片悬停效果
88. HTML5+CSS3小实例广告灯牌效果的loading动画
89. HTML5+CSS3小实例自带射灯的浮雕按钮
90. HTML5+CSS3小实例超时空背景的登录界面
91. HTML5+CSS3小实例旋转的炫光心形loading动画
92. HTML5+CSS3小实例全屏搜索栏
93. HTML5+CSS3小实例四色小球的loading动画
94. HTML5+CSS3小实例悬停翻转的3D卡片
95. HTML5+CSS3小实例纯CSS实现冒泡loading动画
96. HTML5+CSS3小实例3D卡片hover翻转效果
97. HTML5+CSS3小实例纯CSS实现开箱子动画
98. HTML5+CSS3小实例创意条纹背景的图像悬停效果
99. HTML5+CSS3小实例炫彩的发光字特效
100. HTML5+CSS3+JS小实例黑色的简约下拉菜单
101. HTML5+CSS3小实例浮雕效果的彩色loading动画
102. HTML5+CSS3+JS小实例切片式轮播图
103. HTML5+CSS3小实例纯CSS实现百叶窗图片切换效果
104. HTML5+CSS3小实例单选按钮的创意动画
105. HTML5+CSS3+JS小实例喜庆绚烂的新年烟花特效
2022-02-07 10:07:46 +00:00
106. HTML5+CSS3小实例2.5D立体文字效果
107. HTML5+CSS3小实例3D导航栏
108. HTML5+CSS3+JS小实例漂亮的导航栏动画效果
109. HTML5+CSS3小实例灵动的文字loading加载特效
110. HTML5+CSS3小实例百看不腻的旋转loading动画
111. HTML5+CSS3+JQuery小实例DIY切换衣服图案
112. HTML5+CSS3小实例纯CSS实现文本背景扫光效果
113. HTML5+CSS3+JS小实例圆形剪切图片光标悬停特效
114. HTML5+CSS3+JS小实例Tabbar图标栏动画切换特效
115. HTML5+CSS3+JQuery小实例可爱的熊猫遮眼登录界面
116. HTML5+CSS3小实例社交卡片悬停特效
117. HTML5+CSS3+JS小实例3层图像的滑动对比效果
118. HTML5+CSS3小实例带LOGO的全屏加载动画
119. HTML5+CSS3小实例双层波浪动画特效
120. HTML5+CSS3+JS小实例阿里云盘的侧边导航栏
121. HTML5+CSS3小实例飞行的钢铁侠loading加载动画
122. HTML5+CSS3小实例高光立体壁画式卡片悬停特效
123. HTML5+CSS3+Vue小实例3D圆点波浪动画特效
124. HTML5+CSS3小实例丝滑切换的loading加载动画
125. HTML5+CSS3+JS小实例小清新的卡片式注册登录切换效果
126. HTML5+CSS3小实例纯CSS实现瀑布流布局
127. HTML5+CSS3小实例带标题的图像悬停效果
128. HTML5+CSS3小实例纯CSS实现简约的天气图标动画特效
129. HTML5+CSS3小实例纯CSS实现简约的天气图标动画特效
130. HTML5+CSS3小实例传送带式的loading加载动画
131. HTML5+CSS3小实例纯CSS实现打字动画特效
132. HTML5+CSS3+JS小实例上下滚动的数字时钟
133. HTML5+CSS3+JS小实例带标题描述的圆角图片手风琴效果
134. HTML5+CSS3小实例简单又别致的环形加载动画
135. HTML5+CSS3+Vue小实例左侧分类菜单右侧轮播图的组合布局
136. HTML5+CSS3小实例萌翻少女心的发光果冻泡泡
137. HTML5+CSS3+Vue小实例仿制腾讯视频的轮播图
138. HTML5+CSS3小实例月步式的loading加载动画
139. HTML5+CSS3小实例卡片悬停图文遮罩显示特效
140. HTML5+CSS3+JS小实例ANIME搭配SVG实现简约酷炫的登录界面
141. HTML5+CSS3+JS小实例迷你音乐播放器
142. HTML5+CSS3+JS小实例数据碎片故障风科技背景动画特效
143. HTML5+CSS3小实例抖音LOGO故障风文字动画特效
144. HTML5+CSS3小实例图片悬停旋转堆叠特效
145. HTML5+CSS3小实例3D分割图片悬停拼接特效
146. HTML5+CSS3+JS小实例祝福版的3D标签云动画特效
147. HTML5+CSS3小实例关门式的图文组合悬停特效
148. HTML5+CSS3+JS小实例简约的垂直选项卡
149. HTML5+CSS3+JS小实例可切换方向的无缝衔接图片滚动效果
150. HTML5+CSS3+Vue小实例仿制B站PC端首页的吃豆人轮播图
151. HTML5+CSS3+JS小实例倒计时动画特效
152. HTML5+CSS3+JS小实例Tab选项卡动画切换效果
153. HTML5+CSS3+JS小实例悬停滚动文字的导航栏
154. HTML5+CSS3+JS小实例可自由拖拽排序的表格
155. HTML5+CSS3+JS小实例背景动态变化的登录界面2.0
156. HTML5+CSS3小实例纯CSS实现带进度条的人物卡片切换效果
157. HTML5+CSS3小实例小球爬楼梯loading加载动画
158. HTML5+CSS3+JS小实例快捷菜单图标按钮交互特效
159. HTML5+CSS3+JS小实例翻滚吧乔巴自定义滑块控件
160. HTML5+CSS3小实例带标题的3D多米诺人物卡片
161. HTML5+CSS3+JS小实例环形文字动画特效
162. HTML5+CSS3+JS小实例科技感满满的鼠标移动推开粒子特效
163. HTML5+CSS3小实例纯CSS实现彩虹倒映水面的唯美背景
164. HTML5+CSS3+JS小实例鼠标控制飞机的飞行方向
165. HTML5+CSS3小实例脉冲波纹催眠动画特效
166. HTML5+CSS3+JS小实例霜雾玻璃图片预览特效
167. HTML5+CSS3+JS小实例鼠标滚轮水平滚动
168. HTML5+CSS3+JS小实例仿优酷视频轮播图
169. HTML5+CSS3小实例网页底部间隔波浪动画特效
170. HTML5+CSS3+JS小实例打散文字随机浮动特效
171. HTML5+CSS3+JS小实例带密码灯照射的登录界面
172. HTML5+CSS3+Vue小实例路飞出海的动画特效
173. HTML5+CSS3+JS小实例交互式图片鼠标悬停景深对焦效果
174. HTML5+CSS3+JS小实例简约的黑色分页
175. HTML5+CSS3小实例带功能区的图片悬停特效
176. HTML5+CSS3+Vue小实例输入框打字放大特效
177. HTML5+CSS3小实例悬停带提示的导航栏
178. HTML5+CSS3小实例炫酷的流边按钮
2022-08-16 03:34:08 +00:00
179. HTML5+CSS3小实例悬停放大图片的旅游画廊
180. HTML5+CSS3+JS小实例使用L2Dwidget实现二次元卡通看板娘
181. HTML5+CSS3+JS小实例Canvas图片滑块拖动验证码
182. HTML5+CSS3+JS小实例霁青+翠蓝的Tabbar动画特效
183. HTML5+CSS3+JS小实例蜂巢里的小蜜蜂光标特效
184. HTML5+CSS3+JS小实例九宫格图片鼠标移入移出方向感知特效
185. HTML5+CSS3小实例纯CSS实现文字组成肖像特效
186. HTML5+CSS3+JS小实例数字滑动选择控件
187. HTML5+CSS3+Vue小实例浪漫的心形文字动画特效
188. HTML5+CSS3+Vue小实例饮料瓶造型文字旋转特效
189. HTML5+CSS3+JS小实例焦点图波浪切换动画特效
190. HTML5+CSS3小实例3D翻转Tab选项卡切换特效
191. HTML5+CSS3+JS小实例文字依次点击验证
192. HTML5+CSS3+JS小实例过山车文字动画特效
193. HTML5+CSS3+JS小实例可拖拽排序的人物列表
194. HTML5+CSS3+JS小实例自适应瀑布流布局
195. HTML5+CSS3小实例纯CSS实现网站置灰
196. HTML5+CSS3小实例纯CSS实现锚点平滑过渡
197. HTML5+CSS3+Vue小实例彩带圣诞树
198. HTML5+CSS3+JS小实例网页手电筒
199. HTML5+CSS3小实例不一样的超链接下划线
200. HTML5+CSS3+JS小实例网站实现一键切换暗色主题
201. HTML5+CSS3小实例左右摇晃的输入框
202. HTML5+CSS3+JS小实例过年3D烟花秀
203. HTML5+CSS3+JS小实例特殊验证码输入框
204. HTML5+CSS3+Vue小实例彩色圆环溶解加载动画
205. HTML5+CSS3小实例文字涂抹动画
206. HTML5+CSS3小实例人物介绍卡片2.0
207. HTML5+CSS3小实例弹出式悬停效果
208. HTML5+CSS3+JS小实例五彩纸屑礼花筒
209. HTML5+CSS3+JS小实例音频可视化
210. HTML5+CSS3小实例文字溶合切换效果
211. HTML5+CSS3+JS小实例实时给中文添加拼音
212. HTML5+CSS3小实例纯CSS实现弧边选项卡
213. HTML5+CSS3小实例旋转彩色loading加载动画
214. HTML5+CSS3小实例创意修剪路径图像悬停效果
215. HTML5+CSS3+JS小实例黑客帝国“代码雨”特效
216. HTML5+CSS3+JS小实例科技感满满的数字科技脸特效
217. HTML5+CSS3+JS小实例锥形渐变彩虹按钮
218. HTML5+CSS3小实例彩色拨动开关
219. HTML5+CSS3+JS小实例右键菜单
220. HTML5+CSS3小实例环绕小球弹性loading动画
221. HTML5+CSS3+JS小实例文字阴影还能这么玩
222. HTML5+CSS3+JS小实例灵动的流边开关切换效果
223. HTML5+CSS3+JS小实例暗紫色Tabbar
224. HTML5+CSS3小实例按钮边框动效
225. HTML5+CSS3+JS小实例全屏范围滑块
226. HTML5+CSS3+JS小实例全屏背景切换动画
227. HTML5+CSS3小实例衣服颜色选择器
228. HTML5+CSS3小实例具有悬停效果的3D闪耀动画
229. HTML5+CSS3+JS小实例创意罗盘时钟
230. HTML5+CSS3+JS小实例原生JS实现全屏滚动
231. HTML5+CSS3小实例文字边框视觉错位
232. HTML5+CSS3小实例旋转中的视差效果
233. HTML5+CSS3小实例环形文字加载动画
234. HTML5+CSS3+JS小实例圣诞按钮
235. HTML5+CSS3+JS小实例图片切换特效之模糊变清晰
236. HTML5+CSS3小实例荧光图标悬停效果
237. HTML5+CSS3小实例菜单按钮的三种切换动画
238. HTML5+CSS3小实例炫彩荧光线条登录框
239. HTML5+CSS3小实例飞行滑块
240. HTML5+CSS3小实例无限循环loading动画
241. HTML5+CSS3+JS小实例旋转渐变光标
242. HTML5+CSS3小实例点画文字悬停效果
243. HTML5+CSS3+JS小实例网格图库
244. HTML5+CSS3小实例粘性文字的滚动效果
245. HTML5+CSS3小实例简约灵动的深色登录界面
246. HTML5+CSS3小实例可爱的卷纸开关
247. HTML5+CSS3+JS小实例图片九宫格
248. HTML5+CSS3小实例响应式漫画网格布局
249. HTML5+CSS3小实例纯CSS实现奥运五环
250. HTML5+CSS3小实例叠方块loading加载动画
251. HTML5+CSS3小实例立方体控件的登录表单
252. HTML5+CSS3小实例三色小球旋转叠加loading动画
2022-08-16 03:34:08 +00:00
#### 赞赏作者
2022-12-02 09:51:23 +00:00
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%812.jpg)