@cssints/skeleton (英语)
正在装入占位符 点缀 他的光辉在页面的相间
挂载: 一个链式成员 cssints/plugin scope()之后 同步斯凯莱通。 。 。 .
没有运行时间.
import { cn, height, hover, width } from "cssints" with { type: "cssints" };
import { skeleton } from "@cssints/skeleton" with { type: "cssints" };
export const line = cn(skeleton(), height("1em"), width("12rem"));
export const avatar = cn(skeleton().radius("50%"), width("3rem"), height("3rem"));
export const branded = cn(skeleton().color("#e4e4f0").highlight("#f4f4fa"), height("8rem"));
export const card = cn(skeleton(), hover(skeleton().highlight("white")));
@property --skeleton-p {
syntax: "<percentage>";
inherits: true;
initial-value: 100%;
}
@layer _.k {
@keyframes kf-1a2b3c4d-skeleton {
from {
--skeleton-p: 100%;
}
to {
--skeleton-p: 0%;
}
}
@media (prefers-reduced-motion: no-preference) {
:root:has(._skeleton-clock) {
animation: kf-1a2b3c4d-skeleton 1.5s ease-in-out infinite;
}
}
._skeleton-core {
border-radius: var(--skeleton-r, 0.25rem);
background-position: var(--skeleton-p) 0;
background-image: linear-gradient(
90deg,
var(--skeleton-c, color-mix(in oklab, currentColor 12%, transparent)) 40%,
var(--skeleton-h, color-mix(in oklab, currentColor 4%, transparent)) 50%,
var(--skeleton-c, color-mix(in oklab, currentColor 12%, transparent)) 60%
);
background-size: 300% 100%;
background-attachment: fixed;
}
/* only for targets without color-mix() (the defaults have Chrome 109) */
@supports not (color: color-mix(in oklab, red, red)) {
._skeleton-core {
background-image: linear-gradient(
90deg,
var(--skeleton-c, rgb(128 128 128 / 20%)) 40%,
var(--skeleton-h, rgb(128 128 128 / 8%)) 50%,
var(--skeleton-c, rgb(128 128 128 / 20%)) 60%
);
}
}
}
@layer _.a {
._kkw3xj {
--skeleton-r: 50%;
}
/* ... */
}
skeleton() 实值 "_skeleton-core _skeleton-clock"; 每种方法都增加了一个类. 两个内核都写成样式,没有生
CSS: 时钟是 media("(prefers-reduced-motion: no-preference)")(nest(":root:has(&)")(animation(keyframes({ from: vars({ "--_p": "100%" }), to: vars({ "--_p": "0%" }) }), "1.5s ease-in-out infinite"))),并且只有它的 @property
注册是一个字符串( e)atProperty) (中文(简体) ). 键框名是带有瞄准镜后名的阶梯的散列.
如何保持同步
CSS动画在元素获得风格后开始, 所以一个骨架在700ms后面运行700ms
它, 页面闪出一步。 这里没有骨架运行动画。 一个动画 :root 移动已注册的,
继承百分比, --skeleton-p每一个骨架都读作 background-position:有一个钟,所以
每个浏览器都有一个阶段 @property。动画只在文档中刻出骨架时才开始
(单位:千美元):root:has(._skeleton-clock)),所以一个没有的一页一无所取;当上一页一去一去,一来一来一来一来一来一来一来一来一来一来一来一来一来一来一来一回一来一回的一去一去一去一去一去一去一去一去一去一去一去一去一去一去一回一去一去一回一去一去一去一去一去一去一去一去一去一去一去一去一来一来一去一来一去一来一去一去一去一去一去一去一去一来一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去
重新开始 没有什么不对劲.
梯度是三个宽的取景口 fixed 在取景口,所以乐队扫一页, 横穿每一个
模板,作为一幅图片(同一取景口x的同像素,由浏览器测试读取). 何处 fixed 没有
效果(iOS Safari,BCD标记为部分执行) 每个骨架都有自有大小的波段,仍然在
同一时钟:在时相中,不在空间.
其它方式被打分后离开: background-attachment: fixed 每条骨架线上都有动画
空间而非时间(每部动画仍然从自己的站台开始);负数 animation-delay 从
document.timeline.currentTime 是脚本; CSS 没有文档时间线来命名于 animation-timeline (仅滚动和
查看时限),以及 animation-delay: calc() 不能读取时间 .
规则
- 方法,每一次,任何顺序,所有可选:
radius(<length-percentage [0,∞]>)(单位:千美元)0.25rem, (中文(简体) ),color(<color>)(底,文本颜色为12%),highlight(<color>)(乐队,文字颜色为4%). 每个都是一个等级的 习惯财产,所以一种方法在条件下起作用(hover(skeleton().highlight("white"))) (中文(简体) ). - 颜色. 默认组合
currentColor进入透明,所以骨架是一个更暗的盒子 在一页和一页 暗页上更轻一分,而它的乐队也更少了(一分光扫光,一分暗地取出. 内核读取--skeleton-c, (中文(简体) ),--skeleton-h财务报告和审定财务报表--skeleton-r默认值为倒置值,所以设定了祖先主题的值 里面的每个骨架 A 类background-color以透明颜色显示. - 减少运动. 下
prefers-reduced-motion: reduce时钟不运行 :--skeleton-p在初始时停留100%,这让乐队远离页面, 每一个骨架都是它的底色,仍然. - 冲突.
skeleton()设置背景图像、大小、位置和附件及角:acn()那个 拿着,拿着background简称,其中一种或一种border-radius*属性是一个构建错误,来自 内核 :cssints: skeleton: kernel core sets border-radius, background-image, background-size, background-position, background-attachment (this style also sets background)。 。 。 .hover(skeleton())也是建构错误(内核不能是有条件的); 反之, 围着一个方法. - 错误 语法,在类型和建设时间:
skeleton.radius: unexpected "-4px" in "-4px", expected <length-percentage [0,∞]>, (中文(简体) ),skeleton.color: unexpected "4px" in "4px", expected <color>。 。 。 .
浏览器
bun run test:browsers 装上600px骨架,然后700ms 后装上300px1 和运行相同的控制器
键框本身,暂停动画,从截图上读取每个动画一行:
| 浏览器 | 动画 | A和B(300栏) | 控制权 | 减少动议 |
|---|---|---|---|---|
| Chrome (安装频道) | 一个,打开 :root | 0个栏不同 | 132 (韩语) | 无, 底色 |
| Firefox (克莱赖特建筑) | 一个,打开 :root | 0个栏不同 | 132 (韩语) | 无, 底色 |
| WebKit (克莱赖特干线建设) | 一个,打开 :root | 0个栏不同 | 132 (韩语) | 无, 底色 |
@property (Chrome 85、Firefox 128、Safari 16.4)和 :has() (Chrome 105, Firefox 121, Safari 15.4) 是内核的
requires:缺少目标就是建构警告. 无 @property 作为离散值的动画百分比
而乐队从不显示(底色,平面) :has() 没有动画。 目标没有 color-mix()
构造中添加灰色默认值 @supports not,只有那时.
限制
- 时钟动画 继承的自定义财产
:root因此,当一个骨架挂起时,浏览器将更新 样式。 装入页面的罚款; 将骨架放在忙碌的页面之外 . - 页面的一时钟:持续时间(1.5s),放松和方向对每一个骨架都是一样的,有 对他们来说没有方法.
- 骨架内有文字显示:将文字写出空出,或者隐藏其子孙. 骨架上透明的文字颜色
默认也透明( 它们混合)
currentColor; 给它skeleton().color(...).highlight(...)那麽. - 频段为横向,从左到右;没有脉冲变体.
cd packages/skeleton && bun run test # fixtures through the engine (output, conflicts, errors); bun run typecheck for the type test
cd packages/skeleton && bun run test:browsers # the phase and reduced motion in Chrome, Firefox and WebKit
贷项
共享时钟如下 同步斯凯莱通 (麻省理工学院, Corbin Cruchley). 这个 CSS在此被写入; 没有复制代码 .