<Row>
<Radio
name="answer"
id="A"
css={{
"&+label::after": {
content: "attr(data-tip)", display: "none",
},
"&:checked+label::after": {
display: "inline",
},
}}></Radio>
<Label htmlFor="A" data-tip="tip"></Label>
</Row><div
css={{
...position("relative"),
transformStyle: "preserve-3d",
"& > div": {
...position("absolute"),
backfaceVisibility: hidden ? "hidden" : "visible", },
}}>
<div css={{ transform: "rotateY(-180deg) translateZ(25px)" }}>backface</div>
<div>visible</div>
</div>The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
styled.div({
"&::first-letter": { float: "left",
fontSize: ds.size["5xl"],
color: ds.color.secondary,
},
});styled.div({
"@media (prefers-color-scheme: dark)": {}, "@media (prefers-color-scheme: light)": {},
});《水调歌头·明月几时有》
明月几时有
把酒问青天
不知天上宫阙
今夕是何年
我欲乘风归去
又恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁
低绮户
照无眠
不应有恨
何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟
-- 苏轼
styled.div({
writingMode: "vertical-rl",});const createStore = (reducer, preloadedState, enhancer) => {
const currentState = preloadedState;
let listeners = [];
if (enhancer) {
return enhancer(createStore)(reducer, preloadedState);
}
return {
getState() {
return currentState;
},
dispatch(action) {
currentState = reducer(currentState, action);
listeners.forEach(listener => {
listener();
});
},
subscribe(newListener) {
listeners.push(newListener);
const unsubscribe = () => {
listeners = listeners.filter(l => l !== newListener);
};
return unsubscribe;
},
};
};const Barrage = ({
width,
height,
data,
}: {
width: number;
height: number;
data: string[];
}) => {
const ds = useDesignSystem();
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const barrageArr: (() => void)[] = [];
let animationID: number;
const ctx = canvasRef.current!.getContext("2d") as CanvasRenderingContext2D;
const barrageDraw = (
value: string,
x: number,
y: number,
dx: number,
index: number,
) => () => {
x -= dx;
if (x < -1 * width * 1.5) {
x = (1 + (index * 0.1) / Math.random()) * width;
y = Math.floor(Math.random() * (height - 30)) + 30;
dx = 1 + Math.random() * 3;
}
ctx.font = "1.5rem Microsoft YaHei";
ctx.fillStyle = ds.colorPalette.white;
ctx.fillText(value, x, y);
};
const barrageAnimate = () => {
animationID = requestAnimationFrame(barrageAnimate);
ctx.clearRect(0, 0, width, height);
for (let i = 0; i < barrageArr.length; i++) {
const draw = barrageArr[i];
draw();
}
};
data.map((value, index) => {
const x = (1 + (index * 0.1) / Math.random()) * width;
const y = Math.floor(Math.random() * (height - 30)) + 30;
const dx = 1 + Math.random() * 3;
barrageArr.push(barrageDraw(value, x, y, dx, index));
});
barrageAnimate();
return () => {
cancelAnimationFrame(animationID);
};
}, [width, height, data]);
return (
<canvas
ref={canvasRef}
width={width}
height={height}
css={{
width,
height,
}}
/>
);
};