枫上雾棋的 storybook
  • CORE
  • COMPONENTS
  • CASES
  • CODE
css
javascript

attr

100、答题挺辛苦,这道题就送给你了
<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>
Source

BEM

.block {
}

元素

.block__element {
}

修饰符

.block--modifier {
}
Source

backface-visibility

visible
backface
hidden
backface
<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>
Source

first-letter

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: "#cd5c5c",
  },
});
Source

conic-gradient

// pieChart
styled.div({
  background:
    "conic-gradient(from -40deg, #0088FE 0% 40%, #00C49F 40% 50%, #FFBB28 50% 70%, #FF8042 70% 100%)",  borderRadius: "50%",
});
// checkerboard
styled.div({
  background: "conic-gradient(white 25%, black 0 50%, white 0 75%, black 0)",
  backgroundSize: "32px 32px",
});
// starburst
styled.div({
  background: `repeating-conic-gradient(#0ac 0 15deg, ${lighten(    0.25,
    "#0ac",
  )} 0 30deg)`,
  borderRadius: "50%",
});
Source

mix-blend-mode

mixblendmode

mixblendmode

mixblendmode

styled.div({
  mixBlendMode: "darken",});
Source

prefers-color-scheme

prefers-color-scheme
styled.div({
  "@media (prefers-color-scheme: dark)": {},  "@media (prefers-color-scheme: light)": {},
});
Source

writing-mode

《水调歌头·明月几时有》

明月几时有

把酒问青天

不知天上宫阙

今夕是何年

我欲乘风归去

又恐琼楼玉宇

高处不胜寒

起舞弄清影

何似在人间

转朱阁

低绮户

照无眠

不应有恨

何事长向别时圆

人有悲欢离合

月有阴晴圆缺

此事古难全

但愿人长久

千里共婵娟

-- 苏轼

styled.div({
  writingMode: "vertical-rl",});
Source

canvas

const Barrage = ({
  width,
  height,
  data,
}: {
  width: number;
  height: number;
  data: string[];
}) => {
  const ds = useDesignSystem();

  const canvasRef = useRef<HTMLCanvasElement>(null);

  useLayoutEffect(() => {
    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,
      }}
    />
  );
};
Source