开发指导—利用CSS动画实现HarmonyOS动效（一）

注：本文内容分享转载自 HarmonyOS Developer 官网文档

一. CSS 语法参考
CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式，也可在页面 CSS 样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容 JS 的类 Web 开发范式支持的组件样式。

尺寸单位
● 逻辑像素 px（文档中以表示）：
○ 默认屏幕具有的逻辑宽度为 720px（配置见配置文件中的 window 小节），实际显示时会将页面布局缩放至屏幕实际宽度，如 100px 在实际宽度为 1440 物理像素的屏幕上，实际渲染为 200 物理像素（从 720px 向 1440 物理像素，所有尺寸放大 2 倍）。

○ 额外配置 autoDesignWidth 为 true 时（配置见配置文件中的 window 小节），逻辑像素 px 将按照屏幕密度进行缩放，如 100px 在屏幕密度为 3 的设备上，实际渲染为 300 物理像素。应用需要适配多种设备时，建议采用此方法。

● 百分比（文档中以表示）：表示该组件占父组件尺寸的百分比，如组件的 width 设置为 50%，代表其宽度为父组件的 50%。

样式导入
为了模块化管理和代码复用，CSS 样式文件支持 @import 语句，导入 css 文件。

声明样式
每个页面目录下存在一个与布局 hml 文件同名的 css 文件，用来描述该 hml 页面中组件的样式，决定组件应该如何显示。

1.  内部样式，支持使用 style、class 属性来控制组件的样式。例如：

  Hello World

/* index.css */
.container {
  justify-content: center;
}

2.  文件导入，合并外部样式文件。例如，在 common 目录中定义样式文件 style.css，并在 index.css 文件首行中进行导入：、

/* style.css */
.title {
  font-size: 50px;
}

/* index.css */
@import '../../common/style.css';
.container {
  justify-content: center;
}

选择器
css 选择器用于选择需要添加样式的元素，支持的选择器如下表所示：

示例：

  标题
  
    内容