css-doodle 是一個使用 CSS 語法繪製圖案的 Web 元件,是個頗受矚目的繪圖專案,在其 github (css-doodle / css-doodle)上已有超過 4k 的星星數,我想主要原因是那些使用 css 語法所繪製出的圖片吧,美得令人心臟漏拍了。
簡單語法卻能造出複雜巧妙的圖形,令人驚嘆!
<css-doodle click-to-update>
<style>
:doodle {
@grid: 18 / 100vmax;
background: #0a0c27;
}
@random {
border-left: 1px solid #5d81bc;
}
@random {
border-top: 1px solid #5d81bc;
}
@random(.25) {
background: linear-gradient(
@p(#fff, tan, #5d81bc), @lp
)
50% / @r(60%) @lr
no-repeat;
}
@random {
filter: drop-shadow(0 0 10px #fff);
}
</style>
</css-doodle>
帶您欣賞 yuanchuan 的 css-doodle 藝術
官網上有更多精彩範例,有興趣的話不妨前往欣賞哦。
© Copyrights 從想像到創造. All Rights Reserved.