国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css-doodle初認識

趙連江 / 563人閱讀

摘要：詳見另外這樣寫的話，就代表行列，寬度為，高度為若只寫一個，那么行列相同，寬度和高度也相同。最后再推薦大漠老師寫的文章，有更加詳細的說明一個制作圖案的組件除此之外，官網還有更多變量說明，也有的接口，希望你能用它創造出更多美麗驚艷的效果。

前言

css-doodle是一個用來繪制CSS圖案的WEB組件，
請允許我先放上它的官網地址：https://css-doodle.com/
再請允許我放上組件的作者的codepen地址：https://codepen.io/yuanchuan/

以下是來自codepen中使用css-doodle制作出來的一些成品：

一個例子

下面是來自官網的一個例子，在HTML中引入以下代碼：


  :doodle {
    @grid: 7 / 100vmax;
    background: #0a0c27;
  }

  @shape: clover 5;
  background: hsla(
    calc(360 - @index() * 4),
    70%, 68%, @rand(.8)
  );
  transform:
    scale(@rand(.2, 1.5))
    translate(
      @rand(-50%, 50%), @rand(-50%, 50%)
    );

效果如下圖所示:

通過這個代碼，我們大概能夠看出一些東西！

布局

:doodle這個選擇器選中的是這個標簽。
@grid的使用可以猜得到實質上它是用了CSS3的Grid布局，在控制臺中就能看出這個布局，一行分了7個格子：

另外vmax這個單位也是CSS3中的表示尺寸的單位，意思是取寬度和高度大的那個作為標準（手機橫放和豎放的時候會造成寬度和高度的改變），1vmax就是這個標準的1/100。
詳見：http://www.css88.com/book/css...

@grid: 5x8 / 100% 100vh;

另外這樣寫的話，就代表5行8列，寬度為100%，高度為100vh；若只寫一個，那么行列相同，寬度和高度也相同。

以下可以說明：

圖案和漸變 
@shape: clover 5;

官方擁有一個圖案庫：

沒錯啦，這個小花花就在這些圖案里面。
顏色、尺寸還有平移位置也都設置了一個過渡的范圍，這樣就可以出現一種隨機分布的效果。

添加字符 

  :doodle {
    @grid: 20 / 100vmax;
    background: #12152f;
    font-family: sans-serif;
  }
  :after {
    content: "@hex(@rand(0x2500, 0x257f))";
    font-size: 5vmax;
    color: hsla(
      @rand(360), 70%, 70%,
      @rand(.9)
    );
  }

效果圖如下:

想插入文字的話，都是用了偽類來實現的，這里的content的字符編碼是以下的一些，所以就有了成品中的那些“字圖案”：

如何使用

可以引入CDN直接使用：

也可以npm install css-doodle再import CSSDoodle from "css-doodle"。
最后再推薦大漠老師寫的文章，有更加詳細的說明：一個制作Web圖案的組件：css-doodle

除此之外，官網還有更多變量說明，也有JavaScript的接口，希望你能用它創造出更多美麗驚艷的效果^-^。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116761.html

相關文章

  • jointJS(一）--關于jointJS的初認識

    摘要：最近由于項目需要，開始接觸，妥妥不停刷文檔模式，先寫一下對于的粗淺認識吧。我們可以使用已提供的圖元素繪圖，也可根據需求自定義一些圖元素。另外，它極易上手且操作簡單，并且支持所有的現代瀏覽器。 最近由于項目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對于jointjs的粗淺認識吧。 我們可以使用JointJS已提供的圖元素繪圖，也可根據需求自定義一些圖元素。除此之外，Joi...

    jas0n 評論0 收藏0

  • 爬蟲養成記 - 網絡下載器urllib2初認識

    摘要：申明本系列文章借鑒了慕課網的課程，。慕課網是一個非常贊的學習網站。是下的一個模塊，在中，被拆分成和實現一個最簡單的下載器使用函數可以給服務器發送一個請求。該函數返回一個該返回的對象有三個額外的函數取得服務器返回的。默認沒有的，請求方式為。 申明：本系列文章借鑒了慕課網的課程，http://www.imooc.com/learn/563。慕課網是一個非常贊的學習網站。 urllib2是p...

    AlphaWallet 評論0 收藏0

  • 細說Unicode(一) Unicode初認識

    摘要：所以中國人自己創造了一種字符編碼，每個漢字和符號用兩個字節來表示。第一個字節稱為高位字節，第二個字節稱為低位字節。而目前為止我們使用最廣泛的中文編碼還是。 網站開發中經常會被亂碼問題困擾。知道文件編碼錯誤會導致亂碼，但對其中的原理卻知之甚少。偶然從某篇文章了解了Unicode，發現從這條線出發也牽引出了一系列缺失的知識點。通過研讀文章，基本了解了一些以前不明白的問題，所以整理了幾篇，從...

    loostudy 評論0 收藏0

  • 寫給初入門/半路出家的前端er

    摘要：半路出家的前端程序員應該不在少數，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序員應該不在少數，我也是其中之一。 為何會走向前端 非計算機專業的我，畢業之后，就職于一家電力行業公司，做過設備調試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...

    Cc_2011 評論0 收藏0

發表評論

0條評論

趙連江

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<