- 一、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...
- CSS 大面积背景渐变色的页面性能影响深度解析与优化指南在现代网页设计中，大面积的背景渐变（CSS Gradients，如 linear-gradient 或 radial-gradient）因其视觉丰富度高、无HTTP请求开销以及自适应缩放的特性，被广泛应用于各类网站和移动端 WebApp 中。然而，视觉上的惊艳往往伴随着潜在的性能代价。本文将从浏览器的渲染原理出发，深入剖析大面积 CS... CSS 大面积背景渐变色的页面性能影响深度解析与优化指南在现代网页设计中，大面积的背景渐变（CSS Gradients，如 linear-gradient 或 radial-gradient）因其视觉丰富度高、无HTTP请求开销以及自适应缩放的特性，被广泛应用于各类网站和移动端 WebApp 中。然而，视觉上的惊艳往往伴随着潜在的性能代价。本文将从浏览器的渲染原理出发，深入剖析大面积 CS...
- 从零到一：用原生 Web 技术构建现代番茄时钟一款面向工作人群的专注计时工具，从需求分析到上架华为云开发者作品展览馆的完整开发纪实。 前言番茄工作法（Pomodoro Technique）由 Francesco Cirillo 在 1987 年提出，核心简单：25 分钟专注 + 5 分钟休息，循环往复。这个方法至今仍是无数知识工作者对抗拖延、保持专注的利器。本文记录了「番茄时钟 · Pom... 从零到一：用原生 Web 技术构建现代番茄时钟一款面向工作人群的专注计时工具，从需求分析到上架华为云开发者作品展览馆的完整开发纪实。 前言番茄工作法（Pomodoro Technique）由 Francesco Cirillo 在 1987 年提出，核心简单：25 分钟专注 + 5 分钟休息，循环往复。这个方法至今仍是无数知识工作者对抗拖延、保持专注的利器。本文记录了「番茄时钟 · Pom...
- > 12 个色值，撑起整个赛博朋克世界的视觉基调。## 颜色是赛博朋克的第一语言打开 NEON RUNNER 2077，第一眼看到的不是玩法，而是颜色。深黑背景上的霓虹黄、青色、品红——这些颜色不是"好看"这么简单，它们是**信息编码**。在 `src/config/colors.ts` 里，颜色被分成两套：```ts// 整数形式，用于 Phaser 的 fillStyle / strok... > 12 个色值，撑起整个赛博朋克世界的视觉基调。## 颜色是赛博朋克的第一语言打开 NEON RUNNER 2077，第一眼看到的不是玩法，而是颜色。深黑背景上的霓虹黄、青色、品红——这些颜色不是"好看"这么简单，它们是**信息编码**。在 `src/config/colors.ts` 里，颜色被分成两套：```ts// 整数形式，用于 Phaser 的 fillStyle / strok...
- 2026 年 CSS 新特性全景：从条件逻辑到组件级响应式的范式转移2026 年的 CSS 正在经历一场静默的革命。曾经需要 JavaScript 或复杂变通方案才能实现的功能，如今正以声明式的方式融入语言本身。根据 Baseline 月度摘要和 Interop 2026 的进展，以下是对当前最重要 CSS 新功能的系统性梳理。 条件逻辑的 CSS 原生表达 if() 函数：内联条件值if... 2026 年 CSS 新特性全景：从条件逻辑到组件级响应式的范式转移2026 年的 CSS 正在经历一场静默的革命。曾经需要 JavaScript 或复杂变通方案才能实现的功能，如今正以声明式的方式融入语言本身。根据 Baseline 月度摘要和 Interop 2026 的进展，以下是对当前最重要 CSS 新功能的系统性梳理。 条件逻辑的 CSS 原生表达 if() 函数：内联条件值if...
- 前端里很多效果一行 CSS 就能解决，没必要上 JS。举了文字省略号、等比容器、悬停过渡三个常见例子。 前端里很多效果一行 CSS 就能解决，没必要上 JS。举了文字省略号、等比容器、悬停过渡三个常见例子。
- 从零搭建 OKX 官方活动监控仪表盘：React + Vite + TailwindCSS 实战心得本文记录了使用 React 18 + Vite + TailwindCSS 从零搭建一个深色主题监控仪表盘的完整过程，分享在组件设计、状态管理、视觉打磨和工程化方面的实战经验。一、项目背景在加密货币交易领域，交易所官方活动（交易大赛、空投、上新币、公告等）信息分散在不同页面，用户往往需要频繁切... 从零搭建 OKX 官方活动监控仪表盘：React + Vite + TailwindCSS 实战心得本文记录了使用 React 18 + Vite + TailwindCSS 从零搭建一个深色主题监控仪表盘的完整过程，分享在组件设计、状态管理、视觉打磨和工程化方面的实战经验。一、项目背景在加密货币交易领域，交易所官方活动（交易大赛、空投、上新币、公告等）信息分散在不同页面，用户往往需要频繁切...
- 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...
- 鼠标悬停时弹出个小提示，这种 Tooltip 很多人第一反应是找组件库。其实用 data 属性加 ::after 伪元素，十几行 CSS 就能做出来，还能顺便做个小箭头。这篇讲完整实现，以及被父元素裁剪、超出屏幕边界、触屏上不生效、屏幕阅读器读不到这几个真实的限制。 鼠标悬停时弹出个小提示，这种 Tooltip 很多人第一反应是找组件库。其实用 data 属性加 ::after 伪元素，十几行 CSS 就能做出来，还能顺便做个小箭头。这篇讲完整实现，以及被父元素裁剪、超出屏幕边界、触屏上不生效、屏幕阅读器读不到这几个真实的限制。
上滑加载中
推荐直播
-
华为云码道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华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签