純css畫表情

2021-08-01 21:21:33 字數 1046 閱讀 4318

前端的夥伴們通常提到畫,會想到canvas。很多人致力於用css畫圖,今天用css畫個one兔的形象,其中包括不規則橢圓,圓角三角形,非常有趣哦:

class="wrap">

class="leftear">

class="lefte">

class="leftea">

div>

div>

div>

class="rightear">

class="righte">

class="rightea">

div>

div>

class="dong">

div>

div>

class="body">

class="face">

class="eye" id="lefteye">div>

class="eye" id="righteye">div>

class="saihong" id="leftsh">div>

class="saihong" id="rightsh">div>

class="nose">

class="nose1">

div>

div>

class="zui">

div>

div>

div>

div>

body>

html>

這幅圖主要把握好 border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;各個引數的含義

border-radius引數:橫向圓角r1(左上 右上 右下 左下) /縱向圓角r2(左上 右上 右下 左下)

通過對圓角上下半徑的控制從而控制其弧度的改變

純CSS視差滾動

參考旭哥的 demo點這裡 class box class curtain class comehere div div box curtain comehere 1.原理就是 利用perspective translatez,使得影象在視覺上縮放,然後通過scale將縮放至原來的大小,但是對於滾動...

純CSS繪製箭頭

這幾天研究別人的 發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理,發現其實也很簡單。繪製箭頭,首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0,有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...

純CSS圓角矩形

這樣形成的圓角,是具備多種優勢的 1.無論是在橫向還是縱向上都保持著無限的擴充套件性。試著修改box的width content的height。2.沒有hack,且不易出現瀏覽器相容性問題。3.圓角顏色易自定義。4.圓角大小可自定義。試著將class box 的修改為class box2 5.圓角模...