学习 Web 前端

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

CSS 常用样式效果 Code Snippets

浏览 119 扫码 分享 2022-07-09 07:50:50
  • 形状
  • Loading 效果
  • 图片加载失败后CSS样式处理最佳实践
  • 新拟态
  • wave 波浪
  • Tab 切换
  • 滚动条
  • 进度条
  • 列表
  • 公用/初始化
  • 常用阴影效果
  • 卡片
  • 头像
  • tag 标签
  • 按钮
  • 分割线
  • 文本
  • 布局

若有收获，就点个赞吧

0 人点赞

上一篇:
下一篇:
  • 书签
  • 添加书签 移除书签
  • HTML & CSS
    • HTML学习笔记
      • HTML标签
        • meta
          • meta 标签
          • viewport
        • 文件路径
        • 文本标签
          • HTML使用<ruby>标签显示拼音
        • 列表
        • 表格
        • 表单标签
        • 多媒体标签
        • 绘图标签
          • canvas
        • 拖放
        • 应用缓存 离线web应用
        • HTML Web Workers
      • html语义化
      • HTML全局属性
      • 颜色
    • Emmet代码简写语法
    • SVG 可缩放矢量图形
      • SVG 形状
        • 基本形状
        • Path 路径
      • SVG Sprites 技术
      • Snap.svg
    • CSS学习笔记
      • CSS基础 常用属性
        • 引入css
        • CSS优先级
        • CSS关键字
        • 版式 排版
          • 文本
            • text-decoration 划线修饰文本
            • text-emphasis对文字进行强调装饰
          • color 配色
        • 定位
          • position
        • 盒模型
          • Layout布局
            • Flex 弹性布局
            • Grid布局
            • column多列布局
            • 媒体查询
            • screenbar滚动条
          • margin padding 间距
          • resize 设置元素尺寸
          • box-decoration-break 指定跨行渲染表现
          • box-shadow 阴影
          • box-reflect 倒影
        • 视觉
          • 背景/渐变
          • 边框（border）
          • outline 轮廓
          • 圆角border-radius
          • 图形与图像
            • clip-path
            • mask遮罩
            • blend-mode 混合模式
            • CSS混合模式mix-blend-mode/background-blend-mode
            • 滤镜filter
            • 背景滤镜 backdrop-filter
        • 交互
          • scroll-behavior 滚动行为
        • 动画与过渡：animation、transition、transform、translate
          • cubic-bezier 贝塞尔曲线
        • 单位和选择器
          • CSS选择器
            • 伪元素和伪类
          • CSS/CSS3长度、时间、频率、角度单位
        • CSS变量
        • 表单相关样式
        • @规则
          • @media
          • @container 容器查询
          • @property 自定义属性
          • @supports css属性支持查询
          • 浏览器兼容性
        • CSS函数Function
          • cross-fade()图像函数
        • CSS Modules
        • css继承
      • CSS Houdini API
      • css预处理器
        • 导入 @import
      • CSS 常用样式效果 Code Snippets
        • 公用/初始化
        • 布局
        • 文本
        • 分割线
        • 按钮
        • tag 标签
        • 头像
        • 卡片
        • 常用阴影效果
        • 形状
        • 列表
          • CSS实现列表左滑显示按钮的交互效果
        • 进度条
        • 滚动条
        • wave 波浪
        • 新拟态
        • 图片加载失败后CSS样式处理最佳实践
        • Loading 效果
      • CSS Awesome
        • CSS在线工具网址导航
  • JavaScript
    • JavaScript语言基础
      • 基础概念
        • 变量的作用域
        • 变量与内存
      • Javascript数据类型
        • null，undefine和布尔值
        • number数值
        • string字符串
        • symbol （符号）
        • object对象
        • array 数组
        • 字典Map和Set----数组格式的键值对
        • JavaScript 新增两个原始数据类型
        • 数据类型检测
        • 数据类型转换
        • is.ts 常用数据类型判断方法
      • javascript 运算(操作)符
      • 控制流程
        • 条件判断
        • 循环遍历
        • 异常处理
      • JavaScript内置对象（标准库）
        • Number
          • 数字常用计算操作
        • String
          • 字符串常用操作
        • Symbol
        • Array
          • 数组常用操作
        • Object
          • 对象常用操作
        • toString和valueOf
        • 单例内置对象Global与Math
        • 包装对象
        • Date
          • 日期常用操作
          • 前端时间国际化
        • Regexp
          • 正则常用操作 || 工具函数
        • JSON
        • Proxy 代理器
        • Reflect
        • Promise
        • Error
      • 函数
        • 创建函数
        • 函数的参数（输入）
        • 函数的返回（输出）
        • 调用函数
        • bind、call和apply
        • 高阶函数
        • 闭包
        • 柯里化
        • async、await异步解决方案
        • 防抖
        • 节流
      • 迭代器
      • 生成器
      • class
      • ES6 模块化
      • 面向对象编程
      • 所有JS原型相关知识点
      • JS 内存机制
      • JS 执行上下文和执行栈
      • JS执行过程
    • JS Tool Code Snippet
      • utils.js
  • TypeScript
    • 安装使用
    • 数据类型
    • enum 枚举
    • 函数的类型
    • type 类型别名
    • type 字符串字面量类型
    • declare 声明文件
    • 内置对象的类型
    • Generics 泛型 <T>
    • ts 运算符 / 操作符
    • tsconfig.json 编译配置
  • WebAPI
    • BOM & 浏览器相关
      • window对象
      • URL对象
      • crypto 对象
      • 动画与canvas图形
      • ArrayBuffer与Blob
      • 文件 File、FileList、FileReader
        • 文件上传
        • 文件下载
        • JS 文件互转
      • 存储
        • cookie
        • Cookie
        • Storage
      • AJAX--与服务端交换数据
        • Fetch API
        • mock 数据
        • cookie、session、token、jwt、单点登录
      • WebSocket
      • Web Notifications 通知
      • Selection API 选择文本
      • console
      • 浏览器内核
      • 2021 年在 Web 领域有哪些关键进展？
      • 网页元素接口
    • DOM
      • Element 元素
      • 操作元素
        • 操作表单
      • 元素属性
      • 事件
        • 资源事件 页面载入、卸载时
          • visibilitychange 页面可见性 API
        • MouseEvent 鼠标事件
        • 键盘事件
          • 键盘事件 常用操作
        • 表单事件
        • 进度事件
        • 事件循环 Event Loop
      • Mutation observer DOM 变动观察器
      • IntersectionObserver 监听DOM元素是否可见
      • DOMParser API 实现HTML字符的转义和反转义
      • DOM 常用操作
        • css方法封装、类名操作
        • 动画、匀速动画
  • Chrome開發者工具
    • 检查和编辑页面样式
    • Chrome CSS Overview
    • JavaScript debugger 断点调试
    • chrome 开发者工具的 11 个小技巧
  • 前端开发常用框架、插件、类库
    • 开放API / 数据 收集
      • 免费 API
    • 企业中后台产品前端集成方案
      • Ant Design Pro of Vue
    • 前端开发资源网站合集
    • 组件化开发框架
      • Vue
        • Vue.js基础
          • 1. 入门
          • 2. 基础
            • refs 模板引用 访问子组件/元素 实例
          • 生命周期
          • 计算属性 computed 与侦听器 watch
          • watchEffect 监听器
          • Vue 修饰符
          • 组件
            • props
            • 透传 Attribute
              • v-bind="$attrs" 封装第三方组件
            • Provide/Inject 跨级组件传值
            • 组件间传值
            • vue3 命名空间组件
          • 内置指令
          • 数据与方法
          • filters过滤器 用于文本格式化
          • Vue style 样式
          • Vue3 Composition 组合式 API
          • script setup
          • Vue3 不向下兼容变更
        • Vue CLI 及项目配置
          • Vue CLi 常用命令
          • 使用vue-cli4创建vue项目
        • Vue Router
          • 路由跳转
          • require.context实现动态注册路由
        • Vuex
          • 实例
        • Vue SSR
          • Nuxt.js
            • 项目配置
            • 路由
            • asyncData 异步数据
            • 构建
            • nuxt.js开发常见问题
        • Vue项目实战
          • Vite2 Vue3 TypeScript Pinia
          • 常见问题
      • React
        • React基础
          • JSX
          • 基础
        • React Hooks
        • React应用开发框架
          • UmiJS
          • Next.js
          • dumi
    • library(库)
      • CSS 样式 / 组件 / 图标库
        • 踩坑记录
        • 阿里 Ant design
        • 金山云 King Desing
        • 移动端
        • 图标库
        • 消息弹窗
          • sweetalert
        • 骨架屏
        • CSS-In-JS
      • 工具函数库
        • omit.js 删除对象指定属性
        • Lodash
        • Underscore
      • 数据可视化
        • 2D渲染 游戏引擎
          • annie2x
          • pixijs
        • 阿里系
          • AntV —— 蚂蚁集团可视化解决方法
            • X6 图编辑
              • Cell 基类
              • Node 节点
                • ports
              • Edge
              • 工具 Tools
            • G2Plot
          • Cloud Charts 阿里云
          • BizCharts —— 阿里多个部门
        • ECharts —— 百度
          • echarts 原生使用
            • 饼图
          • v-charts
        • 腾讯云图 —— 『大屏可视化』
        • 手绘风格图表
        • LogicFlow 滴滴流程可视化
        • Cytoscape.js
        • DataV
      • 动画库
        • CSS 动画库
        • 21个可以提升你的网站设计水平的网站动画工具
        • Lottie
      • 滚动库
        • vuescroll滚动条样式
        • swiper
        • vue-infinite-scroll 无限滚动列表
        • vue-seamless-scroll 无缝滚动插件
      • 在线 / 编辑器
        • 使用 interact.js 实现拖拽
        • 在线 excel
      • 游戏引擎
        • WEBGAL 网页端视觉小说引擎
      • 前端加密
      • 表单生成器
      • 表单验证
      • 地图
      • NProgress 页面顶部进度条
      • 日期时间处理
        • day.js
        • moment.js
        • manba.js
      • 文件处理
      • 存储库 前端数据库
      • 前端数据模型
      • chchar 汉字拼音笔画js库
      • 数字处理
        • Nzh 转换阿拉伯数字与中文数字
      • 图形/图像 处理
      • uuidjs 生成唯一uid(用户id)
        • nanoid
      • H5广告
      • 新手引导
      • markdown 2 ppt
      • fingerprintjs 浏览器指纹
    • 工具
      • Vite
      • Webpack
      • Babel
      • Lint工具
        • Eslint & Prettier
        • stylelint
      • PostCSS
      • Mocha
    • 博客 静态站点生成器
      • vuepress
      • Docusaurus
      • Gridsome
    • 在线 资源分享合集
    • 插件合集
    • 用户认证
  • 深入前端
    • Web Components 组件
    • WebGL 概念和基础入门
    • 微前端
    • Web 安全·
      • web安全之XSS实例解析
    • 前端性能优化
  • 前端开发规范
    • Vue 前端代码风格指南
    • 项目开发规范
    • HTML规范
    • CSS规范
    • javaScript规范
  • 功能实现
    • 导出多个Excel文件并打包为压缩包下载
    • 浅谈前端弹幕的设计
    • 【实战】如何在输入框实现@ At功能的
    • 妙用 background 实现花式文字效果
    • 实现图片本地化 ServiceWorker IndexedDB
    • 实现高仿github的内容diff效果
    • WebAR与小程序AR极速入门教程
    • 关键词高亮：HTML字符串中匹配跨标签关键词
    • 划线高亮和插入笔记的技术实现
暂无相关搜索结果！

    让时间为你证明

    展开/收起文章目录

    分享，让知识传承更久远

    文章二维码

    手机扫一扫，轻松掌上读

    文档下载

    请下载您需要的格式的文档，随时随地，享受汲取知识的乐趣！
    PDF文档 EPUB文档 MOBI文档

    书签列表

      阅读记录

      阅读进度: 0.00% ( 0/0 ) 重置阅读进度
        思维导图备注