- 一、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...
- 新块凭空出现，是单文件 2048 里最容易被忽略的体验缺口：每次合并后棋盘上突然多一块 2 或 4，玩家视线跟不上，常常要重新扫一遍棋盘才知道新块落在哪。最直觉的做法是给格子加 transition：.tile { transition: transform 120ms ease, opacity 120ms ease; }.tile-new { transform: scale(0.6);... 新块凭空出现，是单文件 2048 里最容易被忽略的体验缺口：每次合并后棋盘上突然多一块 2 或 4，玩家视线跟不上，常常要重新扫一遍棋盘才知道新块落在哪。最直觉的做法是给格子加 transition：.tile { transition: transform 120ms ease, opacity 120ms ease; }.tile-new { transform: scale(0.6);...
- 最近给自己的小工具页面加深色模式，顺手把做法整理成这篇笔记。目标很简单：亮色和深色只维护一套样式，切换时不改结构、不重写颜色，用户的选择还要能记住，下次打开仍然生效。一、先把颜色收进 CSS 变量以前写页面，颜色散落在各个选择器里，改一套主题就要逐行替换。现在的做法是把全部语义颜色集中定义在 :root 里，例如背景、文字、卡片、边框和主色各一个变量，组件只引用变量，不写死色值。切换主题时，... 最近给自己的小工具页面加深色模式，顺手把做法整理成这篇笔记。目标很简单：亮色和深色只维护一套样式，切换时不改结构、不重写颜色，用户的选择还要能记住，下次打开仍然生效。一、先把颜色收进 CSS 变量以前写页面，颜色散落在各个选择器里，改一套主题就要逐行替换。现在的做法是把全部语义颜色集中定义在 :root 里，例如背景、文字、卡片、边框和主色各一个变量，组件只引用变量，不写死色值。切换主题时，...
- 自动化测试脚本经常出现一种情况：昨天还能正常点击的按钮，今天页面稍微改了一下，脚本就报错了。有时是按钮的属性变了，有时是页面结构调整了，还有时是页面上出现了两个同名按钮，脚本不知道该点哪一个。这些问题都与元素定位有关。在 Web 自动化测试中，定位元素是执行点击、输入、选择、断言等操作的基础。传统方法包括 ID、CSS 选择器、XPath 等；随着 Playwright、AI 编程助手和浏览... 自动化测试脚本经常出现一种情况：昨天还能正常点击的按钮，今天页面稍微改了一下，脚本就报错了。有时是按钮的属性变了，有时是页面结构调整了，还有时是页面上出现了两个同名按钮，脚本不知道该点哪一个。这些问题都与元素定位有关。在 Web 自动化测试中，定位元素是执行点击、输入、选择、断言等操作的基础。传统方法包括 ID、CSS 选择器、XPath 等；随着 Playwright、AI 编程助手和浏览...
- 前端网页字体与文字排版文字是网页的主要信息载体。字体选择、行高、字重、字距和换行方式会影响可读性，也会影响页面加载和布局稳定性。排版规则应同时考虑语言、屏幕尺寸和字体加载过程。 一、建立清楚的字体回退字体可能没有安装、加载失败或不支持某些字符。字体栈应包含适合目标语言的系统字体回退，保证内容仍然可读。body { font-family: system-ui, sans-serif;... 前端网页字体与文字排版文字是网页的主要信息载体。字体选择、行高、字重、字距和换行方式会影响可读性，也会影响页面加载和布局稳定性。排版规则应同时考虑语言、屏幕尺寸和字体加载过程。 一、建立清楚的字体回退字体可能没有安装、加载失败或不支持某些字符。字体栈应包含适合目标语言的系统字体回退，保证内容仍然可读。body { font-family: system-ui, sans-serif;...
- 自动化测试脚本经常出现一种情况：昨天还能正常点击的按钮，今天页面稍微改了一下，脚本就报错了。有时是按钮的属性变了，有时是页面结构调整了，还有时是页面上出现了两个同名按钮，脚本不知道该点哪一个。这些问题都与元素定位有关。在 Web 自动化测试中，定位元素是执行点击、输入、选择、断言等操作的基础。传统方法包括 ID、CSS 选择器、XPath 等；随着 Playwright、AI 编程助手和浏览... 自动化测试脚本经常出现一种情况：昨天还能正常点击的按钮，今天页面稍微改了一下，脚本就报错了。有时是按钮的属性变了，有时是页面结构调整了，还有时是页面上出现了两个同名按钮，脚本不知道该点哪一个。这些问题都与元素定位有关。在 Web 自动化测试中，定位元素是执行点击、输入、选择、断言等操作的基础。传统方法包括 ID、CSS 选择器、XPath 等；随着 Playwright、AI 编程助手和浏览...
- 刚开始学网页时，很多人会觉得 CSS 很零散：颜色、边框、间距、居中，每个属性单独看都不难，合在一起却总是不听话。其实 CSS 有一条很清晰的主线：先确定每个元素占多大的盒子，再决定盒子在页面里怎么排，最后才处理颜色、字体这些外观细节。抓住这条主线，很多问题就不再是碰运气。 先理解盒模型一个元素在页面里并不是只有文字本身，它外面依次包着内边距、边框和外边距。内容区放文字或图片，内边距是内容和... 刚开始学网页时，很多人会觉得 CSS 很零散：颜色、边框、间距、居中，每个属性单独看都不难，合在一起却总是不听话。其实 CSS 有一条很清晰的主线：先确定每个元素占多大的盒子，再决定盒子在页面里怎么排，最后才处理颜色、字体这些外观细节。抓住这条主线，很多问题就不再是碰运气。 先理解盒模型一个元素在页面里并不是只有文字本身，它外面依次包着内边距、边框和外边距。内容区放文字或图片，内边距是内容和...
- 本文是一篇原创学习笔记：用 CSS Grid 的 auto-fit 与 minmax 写一个不用媒体查询也能自适应列数的卡片墙，并记录常见坑与调试方法。 本文是一篇原创学习笔记：用 CSS Grid 的 auto-fit 与 minmax 写一个不用媒体查询也能自适应列数的卡片墙，并记录常见坑与调试方法。
- 摘要：微服务拆分后，日志散落在几十个 Pod 里，线上出问题靠“kubectl logs | grep”翻文件，排查一次半小时起步。本文以 Spring Cloud 微服务集群为场景，基于华为云云搜索服务 CSS（Elasticsearch + Kibana），打通日志采集、结构化解析、全文检索、聚合分析与告警全链路，把日志排查从“人肉翻”升级到“秒级定位”。标签建议：云搜索服务 CSS、E... 摘要：微服务拆分后，日志散落在几十个 Pod 里，线上出问题靠“kubectl logs | grep”翻文件，排查一次半小时起步。本文以 Spring Cloud 微服务集群为场景，基于华为云云搜索服务 CSS（Elasticsearch + Kibana），打通日志采集、结构化解析、全文检索、聚合分析与告警全链路，把日志排查从“人肉翻”升级到“秒级定位”。标签建议：云搜索服务 CSS、E...
- Windows 高对比度模式下，硬编码颜色会被系统调色板覆盖，自定义复选框和焦点环容易失去可辨识度。本文说明 forced-colors 媒体查询的用法，用系统颜色关键字与边框表达状态，并给出最小 CSS 示例和浏览器强制颜色模拟验证步骤。 Windows 高对比度模式下，硬编码颜色会被系统调色板覆盖，自定义复选框和焦点环容易失去可辨识度。本文说明 forced-colors 媒体查询的用法，用系统颜色关键字与边框表达状态，并给出最小 CSS 示例和浏览器强制颜色模拟验证步骤。
- CSS Scroll-Driven Animations 是 2023 年 Chrome 推出的新特性，让滚动触发动画不再需要 JavaScript 监听 scroll 事件。一、基本用法.element { animation: fade-in linear; animation-timeline: view();}@keyframes fade-in { from { opacit... CSS Scroll-Driven Animations 是 2023 年 Chrome 推出的新特性，让滚动触发动画不再需要 JavaScript 监听 scroll 事件。一、基本用法.element { animation: fade-in linear; animation-timeline: view();}@keyframes fade-in { from { opacit...
- CSS :has() 是一个非常实用的现代选择器，可以根据子元素或后代元素的状态，反向匹配父元素，让 CSS 具备类似条件判断的能力。 1. 根据子元素控制父元素样式以前想根据子元素是否存在来修改父元素样式，通常需要借助 JavaScript。现在可以直接使用 :has()：.card:has(img) { padding: 0;}.card:has(.error) { border: ... CSS :has() 是一个非常实用的现代选择器，可以根据子元素或后代元素的状态，反向匹配父元素，让 CSS 具备类似条件判断的能力。 1. 根据子元素控制父元素样式以前想根据子元素是否存在来修改父元素样式，通常需要借助 JavaScript。现在可以直接使用 :has()：.card:has(img) { padding: 0;}.card:has(.error) { border: ...
- 制作网页时，经常需要展示文章列表、商品卡片或图片画廊。传统布局可能需要为电脑、平板和手机分别编写不同的 CSS 规则。其实，CSS Grid 提供了一个非常实用的组合：repeat()、auto-fit 和 minmax()。只需几行代码，就能让卡片根据屏幕宽度自动排列，初学者也能轻松掌握。 制作网页时，经常需要展示文章列表、商品卡片或图片画廊。传统布局可能需要为电脑、平板和手机分别编写不同的 CSS 规则。其实，CSS Grid 提供了一个非常实用的组合：repeat()、auto-fit 和 minmax()。只需几行代码，就能让卡片根据屏幕宽度自动排列，初学者也能轻松掌握。
上滑加载中
推荐直播
-
华为云码道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华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签