○ 视觉效果

这个 折纸 组件通过一组 Sass 变量和混音器提供 CSS 视觉效果.

• 使用量
• 标记
• CSS 自定义属性
• 萨斯
• 移徙指南
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-visual-effects。 。 。 .

标记

o-visual-effects 为样式提供不同级别框阴影的帮助类:

• .o-visual-effects-shadow-ultralow
• .o-visual-effects-shadow-low
• .o-visual-effects-shadow-mid
• .o-visual-effects-shadow-high

<div class="o-visual-effects-shadow-high">Box content</div>

o-visual-effects 还提供 时间函数 用于幻灯片、扩展或淡出动画和转换 CSS 自定义属性 (CSS变量). 用户可用 Sass 变量 以应用这些计时函数.

CSS 自定义属性

构建服务用户可使用 CSS 自定义属性( CSS 变量) 应用一致 时间函数 在自定义 CSS 中。 可变变量有:

• --o-visual-effects-timing-slide
• --o-visual-effects-timing-expand
• --o-visual-effects-timing-fade

举个例子.

.transition--slide {
    transition: all 0.5s var(--o-visual-effects-timing-slide);
}

.transition--expand {
    transition: all 0.5s var(--o-visual-effects-timing-expand);
}

.transition--fade {
    transition: all 0.5s var(--o-visual-effects-timing-fade);
}

CSS自定义属性(CSS变量)也可用于阴影.

举个例子.

.my-shadow {
    box-shadow: var(--o-visual-effects-shadow-high);
}

萨斯

包括所有 o-visual-effects {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}cs call the oVisualEffects 搅拌。 这将包括用于过渡的框阴影样式和 CSS 自定义属性 时间函数。 。 。 .

@include oVisualEffects();

o-visual-effects 也可能是颗粒输出。 例如,如果您正在使用 Sass 等变量, 则自动关闭 CSS 自定义属性 $o-visual-effects-timing-slide 相反:

@include oVisualEffects(
    $opts: (
        'shadows': (
            'ultralow',
            'low',
            'mid',
            'high',
        ),
    )
);

如果你没有使用 o-visual-effects CSS,而是直接使用其他 Sass 混音器或变量 不需要调用 oVisualEffects。 。 。 .

阴影混合

这个 oVisualEffectsShadowContent 混合用于在元素中添加一致的阴影。 有4个层次的阴影: ultralow, (中文(简体) ), low (违约), mid,以及 high。 。 。 .

示例

.my-element {
    @include oVisualEffectsShadowContent('mid');
}

输出 :

.my-element {
    box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}

过渡变量

在 CSS 的元素中添加过渡时,您应当使用 o-visual- effects 变量来进行一致的计时 slide, (中文(简体) ), expand,以及 fade 效应.

示例

.transition--slide {
    transition: all 0.5s $o-visual-effects-timing-slide;
}

.transition--expand {
    transition: all 0.5s $o-visual-effects-timing-expand;
}

.transition--fade {
    transition: all 0.5s $o-visual-effects-timing-fade;
}

输出 :

.transition--slide {
    transition: all 0.5s cubic-bezier(1, 0, 0.5, 1.275);
}

.transition--expand {
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.transition--fade {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

移徙指南

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .