css-doodle 類CSS系統套件 可用來繪圖

今天要介紹的是CSS-doodle,不知道有多少人知道這東西,今天在codepen,看到有人寫了一個很奇怪的的語法
點我進入

查了一下,才知道CSS-doodle是用來畫圖的,他使用類似Grid的網格來繪製圖片,且語法與CSS通用,這個就好玩了。

官方網站 : https://css-doodle.com/#usage

使用方式 (可用CDN & NPM)

<script src="https://unpkg.com/css-doodle@0.8.5/css-doodle.min.js"></script>

<css-doodle>
  /* put your code here */
</css-doodle>
npm install css-doodle

/* import it */
import 'css-doodle';

範例

:doodle {
  @grid: 9 / 85%;
  @shape: circle;
}

will-change: transform;
transition: .4s @r(.6s);
transform: rotate(@r(360deg));
@shape: triangle;

--n: calc(
    @abs(@abs(@row - 5)
  + @abs(@col - 5) - 9) / 9
);

background: hsla(
  calc(var(--n) * 360 + 120),
  60%, 68%, var(--n)
);

因為她還是使用CSS變數來寫,所以IE基本上是不支援了,edge 也不支援,純粹知道就好,作用可以拿來唬人

相關資訊

https://codepen.io/collection/XyVkpQ/

https://github.com/css-doodle/css-doodle

夾尾巴

不知道甚麼端的工程師,低薪努力中

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *