学习 Web 前端

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

图形与图像

浏览 87 扫码 分享 2023-05-08 21:35:06
  • Shapes
  • object-fit
  • clip-path 剪辑路径
  • mask遮罩
  • blend-mode 混合模式
  • CSS混合模式mix-blend-mode/background-blend-mode
  • 滤镜filter
  • 背景滤镜 backdrop-filter

若有收获，就点个赞吧

0 人点赞

上一篇:
下一篇:
  • 书签
  • 添加书签 移除书签
  • HTML学习笔记
    • HTML标签
      • meta
        • meta 标签
        • viewport
      • 文件路径
      • 文本标签
        • 使用 <ruby> 标签显示拼音
      • 列表
      • 表格
      • 表单标签
      • 多媒体标签
        • audio
      • 绘图标签
        • canvas
      • 拖拽
      • 应用缓存 离线web应用
      • HTML Web Workers
    • html语义化
    • HTML全局属性
    • 颜色
  • Emmet代码简写语法
  • CSS学习笔记
    • CSS基础 常用属性
      • 引入css
      • CSS优先级
      • CSS关键字
      • 版式 排版 typography
        • 文本
          • text-decoration 划线修饰文本
          • text-emphasis对文字进行强调装饰
        • 列表项
        • color 配色
      • 长度、时间、频率、角度单位
      • 盒模型
        • Layout布局
          • Flex 弹性布局
          • Grid布局
          • column多列布局
          • 媒体查询
          • screenbar滚动条
        • margin padding 间距
        • resize 设置元素尺寸
        • box-decoration-break 指定跨行渲染表现
        • box-shadow 阴影
        • box-reflect 倒影
      • 定位
        • position
      • 视觉
        • 背景/渐变
        • 边框（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
        • animation
        • cubic-bezier 贝塞尔曲线
      • CSS选择器
        • 伪元素和伪类
        • 条件逻辑选择器
      • CSS变量
      • 表单相关样式
      • @规则
        • @media 媒体查询
        • @container 容器查询
        • @property 自定义属性
        • @supports css属性支持查询
        • @layer 定义样式优先级
        • @scope 作用域内样式
        • 浏览器兼容性
      • CSS函数Function
        • cross-fade()图像函数
      • CSS Modules
      • css继承
    • CSS Houdini API
    • CSS 方法论
    • CSS 预处理器
      • 导入 @import
    • CSS 常用样式效果 Code Snippets
      • 滚动条
      • 表单
      • 公用/初始化
      • 布局
      • 文本
      • 分割线
      • 按钮
      • tag 标签
      • 头像
      • 卡片
      • 常用阴影效果
      • 形状
      • 列表
        • CSS实现列表左滑显示按钮的交互效果
      • 进度条
      • wave 波浪
      • 图片加载失败后CSS样式处理最佳实践
      • Loading 效果
      • 新拟态
    • CSS Awesome
      • CSS在线工具网址导航
  • JavaScript
    • JavaScript语言基础
      • 引入 js
      • 基础概念
        • 变量的作用域
        • 变量与内存
      • Javascript数据类型
        • null，undefine和布尔值
        • number数值
        • string字符串
        • symbol （符号）
        • object 对象
        • array 数组
        • 字典Map和Set----数组格式的键值对
        • JavaScript 新增原始数据类型Record 和 Tuple
        • 数据类型检测
          • is.ts 常用数据类型判断方法
        • 数据类型转换
      • javascript 运算(操作)符
      • 控制流程
        • 条件判断（分支结构）
        • 循环遍历（循环结构）
        • 异常处理
      • JavaScript内置对象（标准库）
        • Number
          • 数字常用计算操作
        • String
          • 字符串常用操作
        • Symbol
        • Array
          • 数组常用操作
        • Object
          • 对象常用操作
        • toString和valueOf
        • 单例内置对象Global与Math
        • 包装对象
        • 函数
          • 创建函数
          • 函数的参数（输入）
          • 函数的返回（输出）
          • 调用函数
          • bind、call和apply
          • 高阶函数
          • 闭包
          • 柯里化
          • async、await异步解决方案
          • 防抖
          • 节流
        • Date 日期
          • 日期常用操作
          • 前端时间国际化
        • Regexp
          • 正则常用操作 || 工具函数
        • JSON
        • Proxy 代理器
        • Reflect
        • Promise
        • Error (JavaScript 报错类型)
      • class 类
      • 迭代器
      • 生成器
      • ES6 模块化
      • 面向对象编程
      • this
      • JS 作用域
      • JS原型相关知识点
      • JS 内存机制
      • JS 执行上下文和执行栈
      • JS执行过程
    • JS Tool Code Snippet
      • utils.js
      • color
      • window
        • url
      • dom
    • WebAPI
      • BOM
        • window对象
        • 全局对象属性
          • navigator 浏览器信息
          • performance
        • console
        • URL对象
        • AJAX--与服务端交换数据
          • Fetch API
          • mock 数据
          • cookie、session、token、jwt、单点登录
        • FormData 表单数据
        • 二进制数据 文件 File、FileList、FileReader
          • ArrayBuffer与Blob
          • FileReader
          • File System Access API
          • 文件上传
          • 文件下载
            • 基于 HTTP Range 实现文件分片并发下载！
          • JS 文件互转
          • 前端上传图片压缩方案
        • 存储
          • cookie
          • Cookie
          • Storage
        • requestAnimationFrame 动画
        • matchMedia 媒体查询
        • WebSocket
        • Web Notifications 通知
        • Selection API 选择文本
        • crypto 对象
        • 浏览器内核
        • 网页元素接口
      • DOM
        • Element 元素
        • 操作元素
          • 操作表单
        • 元素属性
        • 事件
          • 资源事件 页面载入、卸载时
            • Page Visibility API 页面可见性 API
          • MouseEvent 鼠标事件
          • KeyboardEvent 键盘事件
            • 键盘事件 常用操作
            • keyCode is deprecated
          • 表单事件
          • 进度事件
          • 事件循环 Event Loop
          • JS 事件循环 Event Loop
        • Mutation observer DOM 变动观察器
        • IntersectionObserver 监听DOM元素是否可见
        • DOMParser API 实现HTML字符的转义和反转义
        • DOM 常用操作
          • css方法封装、类名操作
          • 动画、匀速动画
    • JavaScript 数据结构与算法
  • TypeScript
    • 安装使用
    • 数据类型
      • 基本类型
      • 引用类型
        • 函数的类型
      • enum 枚举
      • interface 接口
      • type 类型别名
      • type 字面量类型
      • Generics 泛型 <T>
      • 类型推论
    • 内置工具类型
      • Readonly 所有属性值转换为只读的
      • Required 将类型的属性变成必选
      • Partial 将所有属性转换为可选属性
      • Exclude<T, U> 将某个类型中的另一个类型移除掉
      • Extract<T,U> 从某个类型中提取另一个类型
      • Pick 类似 Extract
      • Omit 类似 Exclude
      • NonNullable 去除类型中的 null 和 undefined
    • 类型关键字
      • is 类型保护（守卫）
      • keyof 返回该对象 key 值组成的联合类型
    • ts 运算符 / 操作符
      • ! 非空断言
    • JS 内置对象的类型
    • declare 声明文件
    • tsconfig.json 编译配置
  • SVG 可缩放矢量图形
    • SVG
    • SVG 形状
      • 基本形状
      • Path 路径
    • SVG Sprites 技术
    • Snap.svg
  • Canvas 图形
    • canvas图像识取图片主色
  • Chrome開發者工具
    • 检查和编辑页面样式
    • Chrome CSS Overview
    • JavaScript debugger 断点调试
    • chrome 开发者工具的 11 个小技巧
  • 前端开发常用框架、插件、类库
    • 组件化开发框架
      • Vue
        • Vue.js基础
          • 1. 入门
          • 2. 基础
            • refs 模板引用 访问子组件/元素 实例
          • 生命周期
          • 计算属性 computed 与侦听器 watch
          • watchEffect 监听器
          • Vue 修饰符
          • SFC 单文件组件
            • props
            • emits
            • 透传 Attribute
              • v-bind="$attrs" 封装第三方组件
            • Provide/Inject 跨级组件传值
            • css 样式
            • 内置组件
            • vue3 命名空间组件
            • 组件间传值
            • 组件复用常见问题
          • 内置指令
          • 数据与方法
          • filters过滤器 用于文本格式化
          • Vue3 Composition 组合式 API
          • vue3.2 script setup
          • Vue3 不向下兼容变更
        • Vue CLI 及项目配置
          • Vue CLi 常用命令
          • 使用vue-cli4创建vue项目
        • Vue Router
          • 路由跳转
          • 引入组件注册路由
            • 实现动态注册路由
        • Vuex
          • 实例
        • Vue SSR
          • Nuxt.js
            • 项目配置
            • 路由
            • asyncData 异步数据
            • 构建
            • nuxt.js开发常见问题
        • 常见问题
      • React
        • React基础
          • JSX
          • 基础
        • React Hooks
        • React应用开发框架
          • UmiJS
          • Next.js
          • dumi
    • 开放API / 数据 收集
      • 免费 API
    • Admin 企业中后台产品前端集成方案
      • Ant Design Pro of Vue
    • 博客 静态站点生成器
      • vuepress
      • Docusaurus
      • Gridsome
    • library(库)
      • CSS 样式 / 组件 / 图标库
        • 调试 Element UI 源码的
        • 踩坑记录
        • 阿里 Ant design
        • 金山云 King Desing
        • mantine
        • 移动端
        • 图标库
        • 消息弹窗
          • sweetalert
        • 骨架屏
        • CSS-In-JS
      • 工具函数库
        • 通用工具函数
          • Underscore
          • Lodash
          • omit.js 删除对象指定属性
        • 日期时间处理
          • day.js
          • moment.js
          • manba.js
        • uuidjs 生成唯一uid(用户id)
          • nanoid
        • 数字处理
          • Nzh 转换阿拉伯数字与中文数字
        • 前端加密
      • 数据可视化
        • AntV —— 蚂蚁集团可视化解决方法
        • 统计数据可视化
          • ECharts —— 百度
            • echarts 原生使用
              • 饼图
            • v-charts
          • G2Plot
          • BizCharts —— 阿里
          • 手绘风格图表
        • 关系数据可视化
          • X6 图编辑引擎
            • Cell 基类
            • Node 节点
              • ports
            • Edge
            • 工具 Tools
          • LogicFlow 滴滴流程可视化
          • Cytoscape.js
        • 地图 地理空间数据可视化
          • 大屏地图：从瓦片到引擎，到手把手实战
        • 数据大屏
          • Cloud Charts 阿里云
          • 腾讯云图 —— 『大屏可视化』
          • DataV
        • 2D渲染 游戏引擎
          • WEBGAL 网页端视觉小说引擎
          • annie2x
          • pixijs
        • 3D
          • Three.js
      • 图形/图像 处理
      • 动画库
        • CSS 动画库
        • canvas 效果
        • NProgress 页面顶部进度条
        • Lottie
      • 滚动库
        • vuescroll滚动条样式
        • swiper
        • vue-infinite-scroll 无限滚动列表
        • vue-seamless-scroll 无缝滚动插件
      • 在线 / 编辑器
        • 在线 excel
      • 用户交互
        • Fuse.js 客户端模糊搜索
        • 表单验证
        • sortablejs 拖拽
        • 使用 interact.js 实现拖拽
        • 新手引导
        • vue-codemirror
        • monaco-editor
          • vue3+vite 使用monaco-editor 编辑器
          • monaco常用方法
            • Model
      • 文件处理
      • 存储库 前端数据库
      • 前端数据模型
      • chchar 汉字拼音笔画js库
      • markdown 2 ppt
      • fingerprintjs 浏览器指纹
    • 工具
      • Webpack
      • Babel
      • PostCSS
      • Mocha
    • 在线 资源分享合集
    • 插件合集
  • 深入前端
    • Web Components 组件
    • WebGL
    • 微前端
    • Web 安全·
      • web安全之XSS实例解析
    • 前端性能优化
  • 前端开发规范
    • Vue 前端代码风格指南
    • 项目开发规范
    • HTML规范
    • CSS规范
    • javaScript规范
  • 项目实践
    • nuxt3
      • 创建项目
      • nuxt.config.ts 配置
      • app.config.ts
      • pages 页面 %26 router 路由 %26 middleware 中间件
      • 静态资源
      • components 组件
      • layouts 布局
      • composables Vue 可组合项（Hooks）
      • plugins 插件
      • 代码规范
        • typescript 配置
      • Pinia 全局状态管理
      • vueuse
    • Enhance
      • 环境变量
    • 从 0 搭建 Vite 3 + Vue 3 +TS 项目集成常用功能
      • 创建项目
        • package.json 的脚本命令
      • 部署静态站点
      • Vite 基础配置
      • 代码规范
        • EditorConfig 配置
        • 配置 TypeScript
        • 使用 commitizen git-cz 规范commit message
        • 配置 ESLint %26 Prettier
        • stylelint 规范 css 的书写风格
        • 配置 husky + lint-staged 验证提交内容
        • 使用commitlint验证提交信息
        • vue-tsc 检查提交代码的ts类型
        • 安装 rimraf 删除 node_modules
      • vite 插件
        • vite-plugin-html
        • vite-plugin-style-import 按需引入组件库样式
        • vite-plugin-mock
        • @vitejs-plugin-vue-jsx
        • vite-plugin-vue-setup-extend 添加name
        • @vitejs-plugin-legacy 浏览器兼容支持
        • vite-plugin-compression 开启 gzip
        • rollup-plugin-visualizer - 依赖包分析
      • vue-router 路由工具
      • Pinia 全局状态管理
      • ant design vue 组件库
        • 主题色配置
      • css 预处理器 less
      • 配置 vue-i18n 多语言
      • views 页面
      • enums
      • utils
        • setupComponents 注册全局组件
        • resize-event.ts
      • hooks
      • directives 指令
      • Gitee
      • 性能优化
    • 组件库Monmrepo架构与开发调试环境构建
  • 设计模式
  • 功能实现
    • 主题切换
    • 2种方式快速实现前端截图
    • 导出多个Excel文件并打包为压缩包下载
    • 浅谈前端弹幕的设计
    • 【实战】如何在输入框实现@ At功能的
    • 妙用 background 实现花式文字效果
    • 实现图片本地化 ServiceWorker + IndexedDB
    • 实现高仿github的内容diff效果
    • WebAR与小程序AR极速入门教程
    • 关键词高亮：HTML字符串中匹配跨标签关键词
    • 划线高亮和插入笔记的技术实现
暂无相关搜索结果！

    让时间为你证明

    展开/收起文章目录

    分享，让知识传承更久远

    文章二维码

    手机扫一扫，轻松掌上读

    文档下载

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

    书签列表

      阅读记录

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