- 一、CSS3动画介绍css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。二、CSS3动画制作方式css3 动画制作分为两步：1.创建动画、2.绑定动画（调用动画）。1.创建动画@keyframes 规则@keyframes 规则用于创建动画。单词是关键帧的意思，在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样... 一、CSS3动画介绍css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。二、CSS3动画制作方式css3 动画制作分为两步：1.创建动画、2.绑定动画（调用动画）。1.创建动画@keyframes 规则@keyframes 规则用于创建动画。单词是关键帧的意思，在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样...
- Animate.css anime.js hover.css wow.js scroll reveal.js magic.css move.js Animate.css anime.js hover.css wow.js scroll reveal.js magic.css move.js
- 旨在构建基于组件的应用,可针对性提供如下解决方案： 隔离DOM:组件的 DOM 是独立的(例如，document.querySelector() 不会返回组件 shadow DOM 中的节点)作用域CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏，页面样式也不会渗入组合:为组件设计一个声明性、基于标记的 API简化CSS:作用域 DOM... 旨在构建基于组件的应用,可针对性提供如下解决方案： 隔离DOM:组件的 DOM 是独立的(例如，document.querySelector() 不会返回组件 shadow DOM 中的节点)作用域CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏，页面样式也不会渗入组合:为组件设计一个声明性、基于标记的 API简化CSS:作用域 DOM...
- H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角... H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角...
- H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角... H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角...
- H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角... H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角...
- H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角... H5 无障碍表单与键盘交互摘要：可访问性让不同输入方式和辅助技术都能正确理解网页。表单尤其依赖标签、错误提示、焦点顺序和语义状态。本文从原生 HTML、键盘操作、动态反馈和适配偏好设置，整理可直接落地的实践。 一、优先使用原生语义原生 <button>、<input>、<select> 和 <label> 自带键盘行为及辅助技术语义。用普通 div 模拟按钮，需要自行补上焦点、键盘事件、角...
- > 12 个色值，撑起整个赛博朋克世界的视觉基调。## 颜色是赛博朋克的第一语言打开 NEON RUNNER 2077，第一眼看到的不是玩法，而是颜色。深黑背景上的霓虹黄、青色、品红——这些颜色不是"好看"这么简单，它们是**信息编码**。在 `src/config/colors.ts` 里，颜色被分成两套：```ts// 整数形式，用于 Phaser 的 fillStyle / strok... > 12 个色值，撑起整个赛博朋克世界的视觉基调。## 颜色是赛博朋克的第一语言打开 NEON RUNNER 2077，第一眼看到的不是玩法，而是颜色。深黑背景上的霓虹黄、青色、品红——这些颜色不是"好看"这么简单，它们是**信息编码**。在 `src/config/colors.ts` 里，颜色被分成两套：```ts// 整数形式，用于 Phaser 的 fillStyle / strok...
- 二维布局比 Flex 更灵活，练练手。 二维布局比 Flex 更灵活，练练手。
- 鼠标悬停时弹出个小提示，这种 Tooltip 很多人第一反应是找组件库。其实用 data 属性加 ::after 伪元素，十几行 CSS 就能做出来，还能顺便做个小箭头。这篇讲完整实现，以及被父元素裁剪、超出屏幕边界、触屏上不生效、屏幕阅读器读不到这几个真实的限制。 鼠标悬停时弹出个小提示，这种 Tooltip 很多人第一反应是找组件库。其实用 data 属性加 ::after 伪元素，十几行 CSS 就能做出来，还能顺便做个小箭头。这篇讲完整实现，以及被父元素裁剪、超出屏幕边界、触屏上不生效、屏幕阅读器读不到这几个真实的限制。
- 用TailwindCSS写一个响应式卡片栅格，说明utility-first思路和移动端优先的断点前缀（grid-cols-1 sm:grid-cols-2 lg:grid-cols-3）如何替代手写媒体查询。 用TailwindCSS写一个响应式卡片栅格，说明utility-first思路和移动端优先的断点前缀（grid-cols-1 sm:grid-cols-2 lg:grid-cols-3）如何替代手写媒体查询。
- H5 CSS Grid 二维布局详解摘要：CSS Grid 是浏览器原生的二维布局系统，能同时控制行与列，远超 Flexbox 的一维能力。本文从基本概念、容器属性、项目属性到实战模式，帮你掌握现代网页布局利器。 一、Grid vs FlexboxFlexbox 是一维布局：要么沿主轴排，要么沿交叉轴排，适合导航栏、按钮组等单行/单列场景。Grid 是二维布局：可以同时定义行和列，适合整体... H5 CSS Grid 二维布局详解摘要：CSS Grid 是浏览器原生的二维布局系统，能同时控制行与列，远超 Flexbox 的一维能力。本文从基本概念、容器属性、项目属性到实战模式，帮你掌握现代网页布局利器。 一、Grid vs FlexboxFlexbox 是一维布局：要么沿主轴排，要么沿交叉轴排，适合导航栏、按钮组等单行/单列场景。Grid 是二维布局：可以同时定义行和列，适合整体...
- 先看最硬核的一手：翻牌只用一条 transition塔罗交互的视觉核心是翻牌。这个项目用经典 CSS 3D 双面翻转实现：/* style.css */.tarot-card { width: 130px; height: 200px; position: relative; transform-style: preserve-3d; transition: transform .7... 先看最硬核的一手：翻牌只用一条 transition塔罗交互的视觉核心是翻牌。这个项目用经典 CSS 3D 双面翻转实现：/* style.css */.tarot-card { width: 130px; height: 200px; position: relative; transform-style: preserve-3d; transition: transform .7...
- 很多应届生第一次写 UI 自动化，代码是能跑，但活不长。今天页面调了一下布局、把某个 div 换成了 section，第二天回归一跑，用例红了一片。你去问「是不是登录坏了」，结果点进去一看，功能好好的，是定位找不着元素了。这就是「选择器地狱」：用例的正确性和页面的实现细节死死绑在一起，页面一动，用例就碎。面试官让你现场看一段自动化代码，第一眼看的往往不是你断言了多少东西，而是你怎么定位元素—... 很多应届生第一次写 UI 自动化，代码是能跑，但活不长。今天页面调了一下布局、把某个 div 换成了 section，第二天回归一跑，用例红了一片。你去问「是不是登录坏了」，结果点进去一看，功能好好的，是定位找不着元素了。这就是「选择器地狱」：用例的正确性和页面的实现细节死死绑在一起，页面一动，用例就碎。面试官让你现场看一段自动化代码，第一眼看的往往不是你断言了多少东西，而是你怎么定位元素—...
- 作品简介：将 CSV、TSV 或竖线数据转换为 Markdown 表格，支持表头与对齐Markdown 表格生成器（Markdown Table Generator）把 CSV、TSV 或竖线分隔的数据快速转换为对齐规范的 Markdown 表格。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有处理在浏览器本地完成。功能特性自动识别分隔符：优先识别 Tab，其次竖... 作品简介：将 CSV、TSV 或竖线数据转换为 Markdown 表格，支持表头与对齐Markdown 表格生成器（Markdown Table Generator）把 CSV、TSV 或竖线分隔的数据快速转换为对齐规范的 Markdown 表格。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有处理在浏览器本地完成。功能特性自动识别分隔符：优先识别 Tab，其次竖...
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战，从0到1打通消息通道；码道鸿蒙端云一体化实战，快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人；蒋春阳-华为云AI开发者案例开发专家
本期直播内容： AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签