266 lines
15 KiB
Markdown
266 lines
15 KiB
Markdown
# html_css_demo
|
||
|
||
#### 介绍
|
||
本项目包含了 HTML、CSS、JavaScript、JQuery、Vue 等相关知识和小实例，大家一起学习，一起讨论。
|
||
|
||
#### 备注
|
||
第106期及之后的小实例都在code文件夹下。
|
||
|
||
#### 目录
|
||
|
||
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小实例之文字裂开效果
|
||
21. HTML+CSS小实例之手风琴式加载动画
|
||
22. HTML5+CSS3小实例之分享按钮切换效果
|
||
23. HTML5+CSS3小实例之简单好玩的水球加载效果
|
||
24. HTML5+CSS3小实例之酷炫的ANIPLEX文字特效
|
||
25. HTML5+CSS3小实例之后台管理系统的侧边导航栏
|
||
26. HTML5+CSS3小实例之自定义滤镜实现液体加载动画
|
||
27. HTML5+CSS3小实例之3D旋转木马相册
|
||
28. HTML5+CSS3小实例之云朵特效按钮
|
||
29. HTML5+CSS3小实例之高级的转动变色加载特效
|
||
30. HTML5+CSS3小实例之边框滑动按钮的悬停效果
|
||
31. HTML5+CSS3小实例之雷达扫描特效
|
||
32. HTML5+CSS3小实例之毛玻璃炫光按钮
|
||
33. HTML5+CSS3小实例之手机充电特效
|
||
34. HTML5+CSS3小实例之超酷的字体发光效果
|
||
35. HTML5+CSS3小实例之超酷的文字滚动特效
|
||
36. HTML5+CSS3小实例之伸缩式动态搜索框
|
||
37. HTML5+CSS3小实例之JS+CSS实现日月交替效果
|
||
38. HTML5+CSS3小实例之3D分层按钮的悬停效果
|
||
39. HTML5+CSS3小实例之手机充电特效（二）
|
||
40. HTML5+CSS3小实例之抽屉式相册
|
||
41. HTML5+CSS3小实例之发光文字悬停特效
|
||
42. HTML5+CSS3小实例之背景不停渐变效果
|
||
43. HTML5+CSS3小实例之3D轮播卡片
|
||
44. HTML5+CSS3小实例之炫彩流光圆环加载动画
|
||
45. HTML5+CSS3小实例之响应式卡片悬停效果
|
||
46. HTML5+CSS3小实例之波浪文字效果
|
||
47. HTML5+CSS3小实例之隐藏式侧边栏菜单
|
||
48. HTML5+CSS3小实例之3D立方体旋转相册
|
||
49. HTML5+CSS3小实例之3D分层图像悬停效果
|
||
50. HTML5+CSS3小实例之不偷看密码的超萌猫头鹰登录界面
|
||
51. HTML5+CSS3小实例之动感的金属质感闪光文字
|
||
52. HTML5+CSS3小实例之高级感满满的滚轮视差响应效果
|
||
53. HTML5+CSS3小实例之有趣的幽灵文字特效
|
||
54. HTML5+CSS3小实例之涟漪特效按钮
|
||
55. HTML5+CSS3小实例之酷炫的环形加载动画
|
||
56. HTML5+CSS3小实例之水波纹按钮效果
|
||
57. HTML5+CSS3小实例之背景动态变化的登录界面
|
||
58. HTML5+CSS3小实例之有趣的心形加载动画
|
||
59. HTML5+CSS3小实例之侧边导航栏
|
||
60. HTML5+CSS3小实例之垂直卡片滑动动画
|
||
61. HTML5+CSS3小实例之纯CSS实现轮播图效果
|
||
62. HTML5+CSS3小实例之流星划过天际的动画效果
|
||
63. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果（竖屏）
|
||
64. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果（横屏）
|
||
65. HTML5+CSS3小实例之纯CSS实现点赞的动画效果
|
||
66. HTML5+CSS3小实例之带缩略图的焦点图切换效果
|
||
67. HTML5+CSS3小实例之纯CSS实现一个简单的太阳系
|
||
68. HTML5+CSS3小实例之人物介绍卡片
|
||
69. HTML5+CSS3小实例之动感的环形加载动画
|
||
70. HTML5+CSS3小实例之图像悬停效果
|
||
71. HTML5+CSS3小实例之跳跃的弹性小球加载动画
|
||
72. HTML5+CSS3小实例之白桃粉可爱风的立体字时钟
|
||
73. HTML5+CSS3小实例之非常酷炫的拟物化滑动开关
|
||
74. HTML5+CSS3小实例之仿制网易云音乐网站的轮播图
|
||
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小实例：篮球弹跳动画
|
||
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小实例：喜庆绚烂的新年烟花特效
|
||
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小实例：炫酷的流边按钮
|
||
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动画
|
||
|
||
#### 赞赏作者
|
||
|
||
 |