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 也不支援，純粹知道就好，作用可以拿來唬人
