# web-effects **Repository Path**: itbortnotes/css_demos ## Basic Information - **Project Name**: web-effects - **Description**: 分享工作学习过程中遇见的有趣的css：css基础+css3动画+canvas+svg等；原生js+Jquery+Vue+threejs等，持续更新，如果对你有帮助，欢迎你的star+订阅！ - **Primary Language**: JavaScript - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 50 - **Created**: 2023-04-23 - **Last Updated**: 2023-04-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # css_demos ![输入图片说明](https://img.shields.io/badge/Html-%E8%8B%8F%E8%8B%8F%E5%B0%8F%E8%8B%8F%E8%8B%8F-orange) ![输入图片说明](https://img.shields.io/badge/%E5%8E%9F%E7%94%9Fjs-%E8%8B%8F%E8%8B%8F%E5%B0%8F%E8%8B%8F%E8%8B%8F-orange) ![输入图片说明](https://img.shields.io/badge/vue-%E8%8B%8F%E8%8B%8F%E5%B0%8F%E8%8B%8F%E8%8B%8F-orange) ![输入图片说明](https://img.shields.io/badge/Jquery-%E8%8B%8F%E8%8B%8F%E5%B0%8F%E8%8B%8F%E8%8B%8F-green) ![输入图片说明](https://img.shields.io/badge/%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-%E8%8B%8F%E8%8B%8F%E5%B0%8F%E8%8B%8F%E8%8B%8F-green) ![输入图片说明](https://img.shields.io/badge/css3%E5%8A%A8%E7%94%BB-%E8%8B%8F%E8%8B%8F%E5%B0%8F%E8%8B%8F%E8%8B%8F-green) ![输入图片说明](https://img.shields.io/badge/loading%E5%8A%A8%E7%94%BB-%E6%96%87%E5%AD%97%E5%8A%A8%E7%94%BB-red) #### 联系我 ##### 公众号：苏苏的bug ![](https://camo.githubusercontent.com/927762d2b67f6d53db4b1146ca78273ccbb380f731ec285470d3b35acba76a53/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f737573752d68752f737573752d68752f696d672fe88b8fe88b8fe79a846275672e6a7067) ![](https://s3.bmp.ovh/imgs/2022/07/27/6289fe4ab016c74a.png) #### 介绍 ##### 分享项目过程中遇见的有趣的 css 样式+一些基本 css 样式问题+css3 动画+canvas+svg，原生 js+Jquery+Vue+threejs 等，持续更新，相互学习，并非所有案例皆原创，非原创作品会标出，如果对你有帮助，欢迎你的 star+订阅！ #### 安装 ##### 1.克隆或下载压缩包 ``` git clone https://gitee.com/susuhhhhhh/css_demos.git ``` ##### 2.将 web 文件夹导入开发工具 #### 数据可视化之 echarts~ - [x] 1、柱状图多数据-dataZoom 滑动缩放 - [x] 2、动态关系图-缩放-拖拽 - [x] 3、echarts流动光线 #### 神奇的 CSS~ - [x] 1. 细说 css 的 conic-gradient+linear-gradient+radial-gradient，重点在于圆锥渐变，很神奇的一个属性，不过兼容性有点差哈~ - [x] 2. 设置不同的 border，结合伪元素，得到三角形，梯形，空心箭等样式，本案例列举很多，一次性搞懂叭~ - [x] 3. 鼠标的移出与移入事件，onmouseover+onmouserout - [x] 4. 原生实现图片上传+jq 实现+vue 实现 - [x] 5. echarts-wordcloud 实现词云图 - [x] 6. css 的 filter 属性（滤镜） - [x] 7. 一些动感的加载动画 - [x] 8. css 实现彩虹 loading - [x] 9. 原生 js 实现上拉加载+下拉刷新 - [x] 10. 头部渐变色，鼠标悬浮变色 - [x] 11. box-shadow+radial-gradient+border-image+box-reflect 四种方法实现矩形四个角圆点 - [x] 12. 原生 js 实现图片上一张下一张点击 - [x] 13. 一个简单的小动画 - [x] 14. 一个简单单的渐变动画画画画 - [x] 15. 一些卡券样式 - [x] 16. 一个 mix-blend-mode 的小动画 - [x] 17. 新增一些 loading 动画 - [x] 18. 一个可爱的蛋黄样式的 switch 按钮（学习案例） - [x] 19. 原生 js+three.js 等实现一个 3d 元素周期表（学习案例，尊重原创） - [x] 20. 一个切换的小按钮 - [x] 21. 翻转 360 度的艺术字 - [x] 22. 正在输入的文字动画 - [x] 23. 一个有趣的 404 页面 - [x] 24. 仿 gitee 动态的步骤条 - [x] 25. 实现一个带圆弧的气泡（类似 QQ 气泡） - [x] 26. 自定义滚动条样式 - [x] 27. 一个渐变色的字体 - [x] 28. 一个 hover 加载边框的按钮 - [x] 29. 一个炫酷的按钮 - [x] 30. 一个 hover 按钮 - [x] 31. clip-path 实现一个带有水波纹路文字 - [x] 32. background-clip:text 实现一个文字 - [x] 32. 步骤条 - [x] 33. 鼠标自定义样式 - [x] 34. 一个弹出框动画 - [x] 35. 新增一个垂直步骤条 - [x] 36. 新增一个 404 页面 - [x] 37. 自定义验证码输入框+倒计时 - [x] 38. 新增一个 loading 动画 - [x] 39. 一个拟物态 switch 按钮 - [x] 40. 新增一个粒子背景（canvas+原生 js） - [x] 41. 按钮+1 - [x] 42. 一个旋转的 3d 矩形 - [x] 43. 新增一个步骤条 - [x] 44. 一个地址选择组件 - [x] 45. 文字超出宽度省略号的 4 种方式 - [x] 46. 原生 js 实现时钟特效 - [x] 47. 按钮+1 - [x] 48. 动画+1 - [x] 49. 一些悬浮特效按钮 - [x] 50.clip-path 实现线框 - [x] 51. dom 元素的动态添加与删除（jq） - [x] 52. 一些按钮们 - [x] 53. loading 水球 - [x] 54. loading 动画新增 - [x] 55. 一个粘性小球 - [x] 56. 卡券样式++ - [x] 57. 按钮+1 - [x] 58. flex 竖向布局父元素固定高度超出滚动导致的高度塌陷问题（flex-shrink: 0;） - [x] 59. canvas 背景特效 - [x] 60. 按钮+1 - [x] 61. 地球转动动画 - [x] 62. 烟花随鼠标移动 - [x] 63. 火焰按钮 - [x] 64. css 实现文字打印 - [x] 65. 文字雨 - [x] 66. 带弧度的 tab 选项卡 - [x] 67. css 实现带圆角的圆弧进度条（非 svg，非 echarts，非 canvas） - [x] 68. 悬浮菜单 - [x] 69. 灯泡光影 - [x] 70. 不定长卡券背景 - [x] 71. 数字雨 - [x] 72. 边框圆角渐变色 - [x] 73. 扫一扫的样式 - [x] 74. css 实现各类奇形怪状按钮 - [x] 75. 谷歌 tab 标签栏实现的多种方法 - [x] 76. 箭头按钮 - [x] 77. css3 动画实现文字跳动 - [x] 78. box-shadow 悬浮卡片效果 - [x] 79. 文字折叠效果 - [x] 80. h5 实现头部背景渐变色+弧度 - [x] 81. 文字填充效果 - [x] 82. 毛玻璃效果 - [x] 83. 新增 loading 动画 - [x] 84. CSS 实现手机充电效果 - [x] 85. 跳动的方块 - [x] 86. 页面的滚动产生的小猫咪条 - [x] 87. gitee 的 GVP 文字动画效果（gif 实现） - [x] 88. 2022 文字动画 - [x] 89. 震碎的文字 - [x] 90. 一个按钮 - [x] 91. svg 实现一个六角线框 - [x] 92. 一个鼠标悬浮产生的动画 - [x] 93. 一个博客首页小 demo - [x] 94. 动画实现波浪效果 - [x] 95. svg 实现按钮 hover 效果 - [x] 96. 光影变化文字效果 - [x] 97. canvas 实现烟花特效 - [x] 98. css 实现冰墩墩 - [x] 99. 纯 css 实现一个雪容融 - [x] 100. canavas 实现雨点特效 - [x] 101. CSS @property 属性用法 - [x] 102. drop-shadow 和 box-shadow 的区别 - [x] 103. clip-path+drop-shadow+conic-gradient+@Property 实现一个炫酷的三角形 - [x] 104. cdn 引入 vue，实现一个简易的数据看板 - [x] 105. cdn 引入 axios，实现一个简易的数据表格 - [x] 106. 芒果 TV-loading 动画 - [x] 107. 滚动的数字 - [x] 108. clip-path 实现圆弧进度条 - [x] 109. svg 实现圆弧进度条 - [x] 110. 数字滚动 - [x] 111. 滑动幻灯片 0001（jq 插件，来自 jq 之家） - [x] 112. 数据看板，数据高亮选择 - [x] 113. box-shadow 实现的圆弧 loading 动画 - [x] 114. css 实现悬浮图片产生遮罩变形 - [x] 115. canvas 实现时钟 - [x] 116. SVG 波浪 - [x] 117. css 动画 step（）实现文字打印效果 - [x] 118. checkbox 选中切换效果 - [x] 119. 页面效果——鼠标 hover 放大图片 - [x] 120. 页面效果——鼠标 hover 缩小图片，展示功能区 - [x] 121. 底部渐变色阴影展开与收起 - [x] 122. 三个半圆弧绕圈动画 - [x] 123. 多圆环绕圈动画 - [x] 124. 倒计时动画 - [x] 125. 圆环绕圈-月牙 - [x] 126. input-focus 宽度过渡动画 - [x] 127. 椭圆圆点绕圈动画 - [x] 128. 椭圆围绕球体转动 - [x] 129. loading 动画 01 - [x] 130. loading 动画 02 - [x] 131. loading 动画 03 - [x] 132. tabbar 凹凸选中动画 - [x] 133. hover 纸张折角效果 - [x] 134. 弹框抽屉过渡动画 - [x] 135. 圆形菜单弹出动画 - [x] 136. border-radius 变形 - [x] 137. 音频 loading 动画 - [x] 138. lottie 动画的实现（JSON 数据来自阿里巴巴矢量图标库） - [x] 139. clip-path 实现圆点围绕半圆弧转一圈,无圆弧处圆点消失，保持旋转 1turn - [x] 140. 百分比环形 - [x] 141. 温度计图表 - [x] 142. loading 动画+1 - [x] 143. gsap 数字滚动 - [x] 144. 菱形进度条 - [x] 145. css3 动画+svg 波浪实现水球进度条 - [x] 146. css 动画+translate 实现流星划过 - [x] 147. css 实现 3d 楼梯旋转动画 - [x] 148. Grid 布局实现九宫格图片动画 - [x] 149. CSS 实现卡片边框渐变动画 - [x] 150. CSS 实现 3d 魔方 - [x] 151.SVG 实现拟物态圆环进度条 - [x] 152.SVG-stroke-dasharray 分割 - [x] 153.七彩圆环 loading - [x] 154.CSS 实现灯笼动画 - [x] 155.CSS 实现六角灯笼-兔年大吉 #### 数据可视化之 echarts 部分截图~ ##### 动态关系图-缩放-拖拽 ![输入图片说明](web-pictures/echarts2.gif) ##### 柱状图多数据-dataZoom 滑动缩放 ![输入图片说明](web-pictures/echarts1.gif) ##### echarts流动光线 ![输入图片说明](web-pictures/echarts%E6%B5%81%E5%8A%A8%E5%85%89%E7%BA%BF.png) #### 神奇的 CSS 页面部分截图 ##### 155.CSS 实现六角灯笼-兔年大吉 ![输入图片说明](web-pictures/155.%E5%85%AD%E8%A7%92%E7%81%AF%E7%AC%BC-%E5%85%94%E5%B9%B4%E5%A4%A7%E5%90%89.gif) ##### 154.CSS 实现灯笼动画 ![输入图片说明](web-pictures/154.%E7%81%AF%E7%AC%BC.png) ##### 153.七彩圆环 loading ![输入图片说明](web-pictures/153.%E4%B8%83%E5%BD%A9%E5%9C%86%E7%8E%AFloading.gif) ##### 152.SVG-stroke-dasharray 分割 ![输入图片说明](web-pictures/152.svg%E5%88%86%E5%89%B2%E5%B0%8F%E5%9D%97.gif) ##### 151.SVG 实现拟物态圆环进度条 ![输入图片说明](web-pictures/151.svg%E6%8B%9F%E7%89%A9%E6%80%81%E5%9C%86%E7%8E%AF%E8%BF%9B%E5%BA%A6%E6%9D%A1.gif) ##### 150. CSS 实现 3d 魔方 ![输入图片说明](web-pictures/150.3d%E9%AD%94%E6%96%B9.gif) ##### 149. CSS 实现卡片边框渐变动画 ![输入图片说明](web-pictures/149.gif) ##### 148. Grid 布局实现九宫格图片动画 ![输入图片说明](web-pictures/demo148%E4%B9%9D%E5%AE%AB%E6%A0%BC%E5%8A%A8%E7%94%BB.gif) ##### 147.css 实现 3d 楼梯旋转动画 ![输入图片说明](web-pictures/demo1473d%E6%A5%BC%E6%A2%AF.gif) ##### 146.css 动画+translate 实现流星划过 ![输入图片说明](web-pictures/demo146.gif) ##### 145. css3 动画+svg 波浪实现水球进度条 ![输入图片说明](web-pictures/demo145.gif) ##### 144. 菱形进度条 ![输入图片说明](web-pictures/demo144.gif) ##### 143. gsap 数字滚动 ![输入图片说明](web-pictures/demo143.gif) ##### 142.loading 动画+1 ![输入图片说明](web-pictures/demo142.gif) ##### 141. 温度计图表 ![输入图片说明](web-pictures/demo141.gif) ##### 140. 百分比环形 ![输入图片说明](web-pictures/demo140.gif) ##### clip-path 实现圆点围绕半圆弧转一圈,无圆弧处圆点消失，保持旋转 1turn ![输入图片说明](web-pictures/demo139.gif) ##### lottie 动画的实现（JSON 数据来自阿里巴巴矢量图标库） ![输入图片说明](web-pictures/demo138.gif) ##### 音频 loading 动画 ![输入图片说明](web-pictures/demo137.gif) ##### border-radius 变形 ![输入图片说明](web-pictures/demo136.gif) ##### 圆形菜单弹出动画 ![输入图片说明](web-pictures/demo135.gif) ##### 弹框抽屉过渡动画 ![输入图片说明](web-pictures/demo134.gif) ##### hover 纸张折角效果 ![输入图片说明](web-pictures/demo133.gif) ##### tabbar 凹凸选中动画 ![输入图片说明](web-pictures/tabbar01.gif) ##### loading 动画 03 ![输入图片说明](web-pictures/loading03.gif) ##### loading 动画 02 ![输入图片说明](web-pictures/loading02.gif) ##### loading 动画 01 ![输入图片说明](web-pictures/loading01.gif) ##### 椭圆围绕球体转动 ![输入图片说明](web-pictures/raoqiu.gif) ##### 椭圆圆点绕圈动画 ![输入图片说明](web-pictures/tuoyuan1.gif) ##### input-focus 宽度过渡动画 ![输入图片说明](web-pictures/input1.gif) ##### 圆环绕圈-月牙 ![输入图片说明](web-pictures/yuanhu1.gif) ##### 倒计时动画 ![输入图片说明](web-pictures/daojishi.gif) ##### 多圆环绕圈动画 ![输入图片说明](web-pictures/threeRotate.gif) ##### 三个半圆弧绕圈动画 ![输入图片说明](web-pictures/tranRotate.gif) ##### 底部渐变色阴影展开与收起 ![输入图片说明](web-pictures/%E5%BA%95%E9%83%A8%E9%98%B4%E5%BD%B1%E5%B1%95%E5%BC%80%E4%B8%8E%E6%94%B6%E8%B5%B7.gif) ##### 页面效果——鼠标 hover 缩小图片，展示功能区 ![输入图片说明](web-pictures/hover1.gif) ##### 页面效果——鼠标 hover 放大图片 ![输入图片说明](web-pictures/hover%E6%94%BE%E5%A4%A7%E5%9B%BE%E7%89%87.gif) ##### checkbox 选中切换效果 ![输入图片说明](web-pictures/checkbox.gif) ##### css 动画 step（）实现文字打印效果 ![输入图片说明](web-pictures/typing.gif) ##### SVG 波浪 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/svg%E6%B3%A2%E6%B5%AA.gif) ##### canvas 实现时钟 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/canvas%E6%97%B6%E9%92%9F.gif) ##### css 实现悬浮图片产生遮罩变形 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/hover--.gif) ##### box-shadow 实现的圆弧 loading 动画 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E5%9C%86%E7%8E%AF-load001.gif) ##### 数据看板，数据高亮选择 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%95%B0%E6%8D%AE%E7%9C%8B%E6%9D%BF2.png) ##### 滑动幻灯片 0001 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/slider0001.gif) ##### 数字滚动 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%95%B0%E5%AD%97%E6%BB%9A%E5%8A%A8%E7%9A%84.gif) ##### svg 实现圆弧进度条 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/svg%E5%9C%86%E7%8E%AF.png) ##### clip-path 实现圆弧进度条 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/clip-pathy%E5%9C%86%E5%BC%A7.png) ##### 滚动的数字 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%BB%9A%E5%8A%A8%E6%95%B0%E5%AD%97.gif) ##### 芒果 TV-loading 动画 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/mgld.gif) ##### 简易的数据表格 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/axios-cdn.png) ##### 数据看板 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%95%B0%E6%8D%AE%E9%9D%A2%E6%9D%BF.png) ##### clip-path+drop-shadow+conic-gradient+@Property 实现一个炫酷的三角形 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/drop.png) ##### drop-shadow 和 box-shadow 的区别 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/drop-shadow.png) ##### CSS @property 属性用法 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/propr.gif) ##### 雨点特效 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/rain.png) ##### 纯 css 实现一个雪容融 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/xrr.png) ##### css 实现冰墩墩 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/bdd.png) ##### canvas 实现烟花特效 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/canvas%E7%83%9F%E8%8A%B1%E2%80%98.gif) ##### 光影变化文字效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E5%85%89%E5%BD%B1%E6%96%87%E5%AD%97.gif) ##### svg 实现按钮 hover 效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%8C%89%E9%92%AEhover1.gif) ##### 动画实现波浪效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/wave.gif) ##### 一个博客首页小 demo ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/tiaoblog.gif) ##### 一个鼠标悬浮产生的动画 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/antload.gif) ##### svg 实现一个六角线框 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/ar-svg.gif) ##### 一个按钮 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/btn11.gif) ##### 震碎的文字 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E9%9C%87%E7%A2%8E%E6%96%87%E5%AD%97.gif) ##### 2022 文字动画 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/2022.gif) ##### GVP 文字动画效果（gif 实现） ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/gvp.gif) ##### 页面的滚动产生的小猫咪条 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/toTop.gif) ##### 跳动的方块 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%96%B9%E5%9D%97.gif) ##### CSS 实现手机充电效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E5%85%85%E7%94%B5.gif) ##### 新增 loading 动画 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/charge.gif) ##### 毛玻璃效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%AF%9B%E7%8E%BB%E7%92%83.png) ##### 文字填充效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%96%91%E9%A9%AC%E5%AD%97.png) ##### h5 实现头部背景渐变色+弧度 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/h5/image.png) ##### 文字折叠效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E6%92%92%E7%9A%84.gif) ##### box-shadow 悬浮卡片效果 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E5%8D%A1%E7%89%87.gif) ##### 动画实现文字跳动 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E7%88%B1%E4%BB%95%E8%BE%BE.gif) ##### 箭头按钮 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/%E5%AE%89%E5%A8%9C.gif) ##### 谷歌 tab 标签栏 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/image.png) ##### 各类奇形怪状按钮 ![输入图片说明](https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/web/image.png) ##### 扫一扫的样式 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1122/233115_a9fa48e7_8576727.png "屏幕截图.png") ##### 边框圆角渐变色 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1118/235002_9b108f71_8576727.gif "阿萨德.gif") ##### 数字雨 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1110/002616_442b0a98_8576727.gif "不奋斗.gif") ##### 不定长卡券 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1109/121751_11462378_8576727.png "屏幕截图.png") ##### 灯泡光影 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1108/180953_a2722e75_8576727.gif "请问.gif") ##### 悬浮菜单 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1107/012756_977aa747_8576727.gif "问问.gif") ##### css 实现带圆角的圆弧进度条 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1031/225322_7aba79cf_8576727.png "屏幕截图.png") ##### 带弧度的 tab 选项卡 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1029/004732_faedc06f_8576727.gif "tab.gif") ##### 文字雨 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1029/000742_0a25fd13_8576727.gif "rain.gif") ##### css 实现文字打印 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1028/235229_31b606c6_8576727.gif "我日通.gif") ##### 火焰按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1028/133309_6ee32949_8576727.gif "火焰btn.gif") ##### 烟花随鼠标移动 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1028/131001_4143c431_8576727.gif "烟花.gif") ##### 地球转动动画 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1028/130254_6b712a6a_8576727.gif "地球.gif") ##### 按钮+1 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1028/101712_1beb4d94_8576727.gif "不投入.gif") ##### canvas 背景特效 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1027/223952_de918128_8576727.gif "欧尼.gif") ##### flex 竖向布局父元素固定高度超出滚动导致的高度塌陷问题（flex-shrink: 0;） ![输入图片说明](https://images.gitee.com/uploads/images/2021/1027/181920_1696e179_8576727.gif "GIF.gif") ##### codepen 按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/231710_1b456812_8576727.png "屏幕截图.png") ##### 卡券样式++ ![输入图片说明](https://images.gitee.com/uploads/images/2021/1025/232030_b74c8be2_8576727.gif "快快快.gif") ##### 一个粘性小球 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1025/225222_19867b9b_8576727.gif "儿童er.gif") ##### loading 动画新增 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1025/223139_d29d36f0_8576727.gif "水电费.gif") ##### loading 水球 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1024/214802_034fcd4a_8576727.gif "water.gif") ##### 按钮们 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1024/212635_23983480_8576727.gif "btns.gif") ##### dom 元素的动态添加与删除（jq） ![输入图片说明](https://images.gitee.com/uploads/images/2021/1023/004627_45d43eda_8576727.gif "Gsdas.gif") ##### clip-path 实现线框 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1021/233119_f3072235_8576727.gif "个混分高手d.gif") ##### 悬浮特效按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1021/230205_067dc63b_8576727.gif "btns.gif") ##### loading 动画 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1021/215259_544f41fe_8576727.gif "7赶不及.gif") ##### 按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1021/115754_979a9b9a_8576727.png "屏幕截图.png") ##### 时钟特效 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1020/235617_e43f4b4c_8576727.gif "时钟.gif") ##### 文字超出宽度省略号的 4 种方式 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1019/233810_bda3dd96_8576727.png "屏幕截图.png") ##### 地址选择 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1019/220041_b8006f29_8576727.gif "addreasa.gif") ##### 步骤条 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1019/134149_98725bc1_8576727.gif "视图.gif") ##### 旋转的 3d 矩形 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1019/003814_9c04b729_8576727.gif "正方新.gif") ##### 按钮+1 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1019/002112_b85ff711_8576727.gif "btn.gif") ##### 粒子背景（canvas+原生 js） ![输入图片说明](https://images.gitee.com/uploads/images/2021/1019/001056_a859e4a3_8576727.gif "lizi.gif") ##### 拟物态 switch 按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1018/232105_7ecb03f5_8576727.gif "switch11.gif") ##### loading 动画+1 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1018/205344_9c5db8d4_8576727.gif "loading.gif") ##### 自定义验证码输入框+倒计时 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1018/182406_dadc621f_8576727.gif "12312.gif") ##### 404 页面 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1016/003957_d8f3849c_8576727.gif "404.gif") ##### 垂直步骤条 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/122201_51fc30ca_8576727.gif "steps.gif") ##### 弹出框动画 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/010541_0bb17ad6_8576727.gif "1213.gif") ##### 鼠标自定义 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1014/231411_50332792_8576727.gif "GIF11111.gif") ##### 步骤条 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1014/183706_c0cc2682_8576727.png "屏幕截图.png") ##### background-clip:text 实现一个文字 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/232416_0dfe6728_8576727.gif "12312.gif") ##### 有水波纹路文字 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1013/230527_a17b46c5_8576727.gif "waveing.gif") ##### hover 按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1011/200645_8f8f4309_8576727.gif "GIF666.gif") ##### 炫酷的按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1011/011118_90e9c3e6_8576727.gif "GIF.gif") ##### 加载边框的按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1009/143824_c38169f9_8576727.gif "GIF.gif") ##### 渐变色的字体 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1008/145349_bee51738_8576727.gif "GIF.gif") ##### 自定义滚动条样式 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1008/114406_db74ce4a_8576727.gif "scroll.gif") ##### 个带圆弧的气泡（类似 QQ 气泡） ![输入图片说明](https://images.gitee.com/uploads/images/2021/1008/010439_96163640_8576727.png "屏幕截图.png") ##### gitee 动态的步骤条 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1007/002207_b25a0ca1_8576727.gif "4.gif") ##### 有趣的 404 页面 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1004/234927_8b4ffdea_8576727.gif "GIF.gif") ##### 文字动画 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1002/014151_8099e24c_8576727.gif "GIF.gif") ##### 翻转 360 度的艺术字 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1001/173911_4548cf22_8576727.gif "GIF.gif") ##### 切换的小按钮 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0930/140324_2ec4bb85_8576727.gif "GIF.gif") ##### 3d 元素周期表 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0930/001309_76394625_8576727.gif "GIF.gif") ##### 可爱的蛋黄样式的 switch ![输入图片说明](https://images.gitee.com/uploads/images/2021/0929/145039_39647d3e_8576727.gif "GIF.gif") ##### 新增 loading 动画 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0928/000441_3d86831e_8576727.gif "GIF.gif") ##### mix-blend-mode 的小动画 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/221843_d80fa7f1_8576727.gif "GIF.gif") ##### 卡券样式 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/002601_143bf895_8576727.gif "GIF.gif") ##### 简单单的渐变 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/091817_6a0754e2_8576727.gif "GIF.gif") ##### 简单的小动画 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0926/005537_ba944b51_8576727.gif "GIF.gif") ##### 原生 js 实现图片上一张下一张点击 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0925/024959_fc7ff3af_8576727.gif "GIF.gif") ##### 矩形四个角圆点 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0924/234227_f173d9c9_8576727.png "屏幕截图.png") ##### 头部渐变色 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0917/205024_683b5bcb_8576727.gif "GIF.gif") ##### 上拉加载+下拉刷新 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0912/120453_5bd14efc_8576727.gif "GIF.gif") ##### 彩虹 loading： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0909/002121_91cba916_8576727.gif "GIF.gif") ##### 加载动画： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0907/235529_2f897131_8576727.png "屏幕截图.png") ##### 词云图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0905/232748_811d3c7d_8576727.png "屏幕截图.png") ##### 上传图片 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0905/013406_f65a2bb7_8576727.gif "1.gif") ##### 鼠标的移出与移入事件 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0904/215400_4340f752_8576727.gif "1.gif") ##### 三角形实现： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0901/002950_84d5267f_8576727.png "屏幕截图.png") ##### 圆锥渐变： 1. 设置不同的 border，结合伪元素，得到三角形，梯形，空心箭等样式，本案例列举很多，一次性搞懂叭~ 博客链接：[https://segmentfault.com/a/1190000040611303](https://segmentfault.com/a/1190000040611303) ![输入图片说明](https://images.gitee.com/uploads/images/2021/0830/164727_923cd82a_8576727.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0901/002950_84d5267f_8576727.png "屏幕截图.png") #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request