令人驚嘆的網路藝術 css-doodle

Home CSS 令人驚嘆的網路藝術 css-doodle
令人驚嘆的網路藝術 css-doodle
CSS

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 藝術

官網上有更多精彩範例,有興趣的話不妨前往欣賞哦。

相關文章