Typed.css 项目教程

Typed.css 项目教程

typed.cssA fully functional and flexible typewriter mixin for SCSS, with Less and Stylus support coming soon! Typed.css supports multiple strings, multi-line strings, variable speeds, per-string styling, animated caret (blinking insertion cursor), directional type-pausing, and much more. It's even accessible! ✨项目地址:https://gitcode.com/gh_mirrors/ty/typed.css

1. 项目的目录结构及介绍

Typed.css 是一个用于实现打字机效果的 SCSS 混合器。以下是项目的目录结构及其介绍：

typed.css/
├── LICENSE
├── README.md
└── typed.scss

• LICENSE: 项目的许可证文件，采用 CC0-1.0 许可证。
• README.md: 项目的说明文档，包含项目的基本信息、使用方法和示例。
• typed.scss: 项目的主要文件，包含实现打字机效果的 SCSS 混合器代码。

2. 项目的启动文件介绍

Typed.css 项目的启动文件是 typed.scss。该文件定义了 typed 混合器，用于在 CSS 中实现打字机效果。以下是 typed.scss 文件的基本结构：

@import 'typed';

// 基本语法
selector {
  @include typed($string1, $string2, ..., $speeds, $options);
}

// 高级语法
selector {
  @include typed($strings, $speeds, $options);
}

• @import 'typed': 导入 typed 混合器。
• typed 混合器: 接受多个字符串参数，并可根据需要设置速度和选项。

3. 项目的配置文件介绍

Typed.css 项目没有传统的配置文件，但可以通过传递参数来配置 typed 混合器的行为。以下是一些常见的配置示例：

基本示例

@include typed("String 1", "String 2");

高级示例

@include typed(
  (
    "Red": (color: #e53935),
    "Orange": (color: #f4511e),
    "Yellow": (color: #ffb300),
    "Green": (color: #43a047),
    "Blue": (color: #1e88e5),
    "Indigo": (color: #3949ab),
    "Violet": (color: #8e24aa)
  ),
  2
);

• $strings: 一个映射对象，键为字符串，值为对应的样式。
• $speeds: 速度倍数，用于调整打字速度。

通过这些参数，可以灵活地配置打字机效果的样式和行为。

typed.cssA fully functional and flexible typewriter mixin for SCSS, with Less and Stylus support coming soon! Typed.css supports multiple strings, multi-line strings, variable speeds, per-string styling, animated caret (blinking insertion cursor), directional type-pausing, and much more. It's even accessible! ✨项目地址:https://gitcode.com/gh_mirrors/ty/typed.css