前端的夥伴們通常提到畫,會想到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.圓角模...