成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css-doodle初認識

趙連江 / 569人閱讀

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

前言

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

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

一個例子

下面是來自官網(wǎng)的一個例子，在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的使用可以猜得到實質(zhì)上它是用了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;

官方擁有一個圖案庫：

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

添加字符 

  :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)
    );
  }

效果圖如下:

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

如何使用

可以引入CDN直接使用：

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116761.html

相關(guān)文章

  • jointJS(一）--關(guān)于jointJS的初認識

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

    jas0n 評論0 收藏0

  • 爬蟲養(yǎng)成記 - 網(wǎng)絡(luò)下載器urllib2初認識

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

    AlphaWallet 評論0 收藏0

  • 細說Unicode(一) Unicode初認識

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

    loostudy 評論0 收藏0

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

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

    Cc_2011 評論0 收藏0

發(fā)表評論

0條評論

趙連江

男|高級講師

TA的文章

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