蘋果公司（Apple）的發布會也開完了，新產品也將登陸了。估計很多開發人員看到iPhone X的設備是要崩潰了，特別對於前端開發人員更是如此。 iPhone X的屏幕覆蓋了整個手機的屏幕，為相機和其他各部件留出了一個空間。結果是屏幕設計出現了一些尷尬的情況。比如將網站限制在一個“安全區 ...

幾年前開始就一直想用css畫幅畫。 今天才真正開始， 從簡單的開始。 作為一個工作壓力那么大的程序員，我首先要畫一個太陽。 html如下： View Code css如下： View Code ...

接着之前的[css]我要用css畫幅畫(一) ， 今天，我又畫一個房子，很簡單，屋頂、牆壁、門。 現在開始，做得效果都只兼容chrome，所以下面的css3的屬性可能只有-webkit-前綴。 我只是為了興趣畫畫， 何必理會兼容性呢，是吧？ html ...

最近項目中需要制作一個扇形按鈕，效果是這樣的： 周圍四個扇形，和中間的小圓，全是能點擊的。這就需要畫扇形。百度了一下，有很多文章講了如何生成扇形，最后我借鑒了一個最簡單的實現方式，使用css的clip屬性，完美實現。 參考文章為：http://www.cnblogs.com ...

想實現的效果如下圖： 代碼： ...

css3畫實心圓 實現方法相當簡單，css代碼如下： .circle{ width:100px; height:100px; border-radius:50px; /* 圖形的半徑 */ } ...

半圓： #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100 ...

主要描述的是如何運用 css 繪制一個抽獎轉盤，並運用原生 js 實現轉盤抽獎效果。 先來張效果圖： 布局 一般來說，轉盤一般有四個部分組成：外層閃爍的燈、內層旋轉的圓盤、圓盤上的中獎結果、指針。 所以html的結構如下： 其中燈需要一直閃爍，而抽獎的時候轉盤需要轉動 ...