skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
283 Commits 1 Branch 0 Tags 88 MiB
CSS 53.8%
HTML 29.7%
JavaScript 16.5%
Go to file
DESKTOP-BM6RJU5\wyanh 7b50a96746 新增第252个小实例：三色小球旋转叠加loading动画 2024-08-09 17:10:43 +08:00
code 新增第252个小实例：三色小球旋转叠加loading动画 2024-08-09 17:10:43 +08:00
css no message 2023-03-19 13:45:25 +08:00
fonts 新增第108个小实例：漂亮的导航栏动画效果 2022-02-09 20:06:46 +08:00
html no message 2023-03-19 13:45:25 +08:00
images 新增第247个小实例：图片九宫格 2024-04-26 11:20:26 +08:00
javascript 新增第100个小实例：黑色的简约下拉菜单 2022-01-20 18:23:32 +08:00
js 新增第140个小实例：ANIME搭配SVG实现简约酷炫的登录界面 2022-04-19 17:11:28 +08:00
mp3 no message 2022-12-13 22:20:31 +08:00
.gitignore 图片素材补上 2022-09-09 01:41:17 +08:00
README.md 新增第252个小实例：三色小球旋转叠加loading动画 2024-08-09 17:10:43 +08:00
favicon.ico 新增第235个小实例：图片切换特效之模糊变清晰 2024-01-10 10:57:51 +08:00

README.md

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动画

赞赏作者

image image