分享项目过程中遇见的有趣的 css 样式+一些基本 css 样式问题+css3 动画+canvas+svg，原生 js+Jquery+Vue+threejs 等，持续更新，相互学习，并非所有案例皆原创，非原创作品会标出，如果对你有帮助，欢迎你的 star+订阅！
git clone https://gitee.com/susuhhhhhh/css_demos.git
- 1、柱状图多数据-dataZoom 滑动缩放
- 2、动态关系图-缩放-拖拽
- 3、echarts流动光线
- 1. 细说 css 的 conic-gradient+linear-gradient+radial-gradient，重点在于圆锥渐变，很神奇的一个属性，不过兼容性有点差哈~
- 2. 设置不同的 border，结合伪元素，得到三角形，梯形，空心箭等样式，本案例列举很多，一次性搞懂叭~
- 3. 鼠标的移出与移入事件，onmouseover+onmouserout
- 4. 原生实现图片上传+jq 实现+vue 实现
- 5. echarts-wordcloud 实现词云图
- 6. css 的 filter 属性（滤镜）
- 7. 一些动感的加载动画
- 8. css 实现彩虹 loading
- 9. 原生 js 实现上拉加载+下拉刷新
- 10. 头部渐变色，鼠标悬浮变色
- 11. box-shadow+radial-gradient+border-image+box-reflect 四种方法实现矩形四个角圆点
- 12. 原生 js 实现图片上一张下一张点击
- 13. 一个简单的小动画
- 14. 一个简单单的渐变动画画画画
- 15. 一些卡券样式
- 16. 一个 mix-blend-mode 的小动画
- 17. 新增一些 loading 动画
- 18. 一个可爱的蛋黄样式的 switch 按钮（学习案例）
- 19. 原生 js+three.js 等实现一个 3d 元素周期表（学习案例，尊重原创）
- 20. 一个切换的小按钮
- 21. 翻转 360 度的艺术字
- 22. 正在输入的文字动画
- 23. 一个有趣的 404 页面
- 24. 仿 gitee 动态的步骤条
- 25. 实现一个带圆弧的气泡（类似 QQ 气泡）
- 26. 自定义滚动条样式
- 27. 一个渐变色的字体
- 28. 一个 hover 加载边框的按钮
- 29. 一个炫酷的按钮
- 30. 一个 hover 按钮
- 31. clip-path 实现一个带有水波纹路文字
- 32. background-clip:text 实现一个文字
- 32. 步骤条
- 33. 鼠标自定义样式
- 34. 一个弹出框动画
- 35. 新增一个垂直步骤条
- 36. 新增一个 404 页面
- 37. 自定义验证码输入框+倒计时
- 38. 新增一个 loading 动画
- 39. 一个拟物态 switch 按钮
- 40. 新增一个粒子背景（canvas+原生 js）
- 41. 按钮+1
- 42. 一个旋转的 3d 矩形
- 43. 新增一个步骤条
- 44. 一个地址选择组件
- 45. 文字超出宽度省略号的 4 种方式
- 46. 原生 js 实现时钟特效
- 47. 按钮+1
- 48. 动画+1
- 49. 一些悬浮特效按钮
- 50.clip-path 实现线框
- 51. dom 元素的动态添加与删除（jq）
- 52. 一些按钮们
- 53. loading 水球
- 54. loading 动画新增
- 55. 一个粘性小球
- 56. 卡券样式++
- 57. 按钮+1
- 58. flex 竖向布局父元素固定高度超出滚动导致的高度塌陷问题（flex-shrink: 0;）
- 59. canvas 背景特效
- 60. 按钮+1
- 61. 地球转动动画
- 62. 烟花随鼠标移动
- 63. 火焰按钮
- 64. css 实现文字打印
- 65. 文字雨
- 66. 带弧度的 tab 选项卡
- 67. css 实现带圆角的圆弧进度条（非 svg，非 echarts，非 canvas）
- 68. 悬浮菜单
- 69. 灯泡光影
- 70. 不定长卡券背景
- 71. 数字雨
- 72. 边框圆角渐变色
- 73. 扫一扫的样式
- 74. css 实现各类奇形怪状按钮
- 75. 谷歌 tab 标签栏实现的多种方法
- 76. 箭头按钮
- 77. css3 动画实现文字跳动
- 78. box-shadow 悬浮卡片效果
- 79. 文字折叠效果
- 80. h5 实现头部背景渐变色+弧度
- 81. 文字填充效果
- 82. 毛玻璃效果
- 83. 新增 loading 动画
- 84. CSS 实现手机充电效果
- 85. 跳动的方块
- 86. 页面的滚动产生的小猫咪条
- 87. gitee 的 GVP 文字动画效果（gif 实现）
- 88. 2022 文字动画
- 89. 震碎的文字
- 90. 一个按钮
- 91. svg 实现一个六角线框
- 92. 一个鼠标悬浮产生的动画
- 93. 一个博客首页小 demo
- 94. 动画实现波浪效果
- 95. svg 实现按钮 hover 效果
- 96. 光影变化文字效果
- 97. canvas 实现烟花特效
- 98. css 实现冰墩墩
- 99. 纯 css 实现一个雪容融
- 100. canavas 实现雨点特效
- 101. CSS @property 属性用法
- 102. drop-shadow 和 box-shadow 的区别
- 103. clip-path+drop-shadow+conic-gradient+@Property 实现一个炫酷的三角形
- 104. cdn 引入 vue，实现一个简易的数据看板
- 105. cdn 引入 axios，实现一个简易的数据表格
- 106. 芒果 TV-loading 动画
- 107. 滚动的数字
- 108. clip-path 实现圆弧进度条
- 109. svg 实现圆弧进度条
- 110. 数字滚动
- 111. 滑动幻灯片 0001（jq 插件，来自 jq 之家）
- 112. 数据看板，数据高亮选择
- 113. box-shadow 实现的圆弧 loading 动画
- 114. css 实现悬浮图片产生遮罩变形
- 115. canvas 实现时钟
- 116. SVG 波浪
- 117. css 动画 step（）实现文字打印效果
- 118. checkbox 选中切换效果
- 119. 页面效果——鼠标 hover 放大图片
- 120. 页面效果——鼠标 hover 缩小图片，展示功能区
- 121. 底部渐变色阴影展开与收起
- 122. 三个半圆弧绕圈动画
- 123. 多圆环绕圈动画
- 124. 倒计时动画
- 125. 圆环绕圈-月牙
- 126. input-focus 宽度过渡动画
- 127. 椭圆圆点绕圈动画
- 128. 椭圆围绕球体转动
- 129. loading 动画 01
- 130. loading 动画 02
- 131. loading 动画 03
- 132. tabbar 凹凸选中动画
- 133. hover 纸张折角效果
- 134. 弹框抽屉过渡动画
- 135. 圆形菜单弹出动画
- 136. border-radius 变形
- 137. 音频 loading 动画
- 138. lottie 动画的实现（JSON 数据来自阿里巴巴矢量图标库）
- 139. clip-path 实现圆点围绕半圆弧转一圈,无圆弧处圆点消失，保持旋转 1turn
- 140. 百分比环形
- 141. 温度计图表
- 142. loading 动画+1
- 143. gsap 数字滚动
- 144. 菱形进度条
- 145. css3 动画+svg 波浪实现水球进度条
- 146. css 动画+translate 实现流星划过
- 147. css 实现 3d 楼梯旋转动画
- 148. Grid 布局实现九宫格图片动画
- 149. CSS 实现卡片边框渐变动画
- 150. CSS 实现 3d 魔方
- 151.SVG 实现拟物态圆环进度条
- 152.SVG-stroke-dasharray 分割
- 153.七彩圆环 loading
- 154.CSS 实现灯笼动画
- 155.CSS 实现六角灯笼-兔年大吉
- 设置不同的 border，结合伪元素，得到三角形，梯形，空心箭等样式，本案例列举很多，一次性搞懂叭~ 博客链接：https://segmentfault.com/a/1190000040611303
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request