先看兩個效果：
下面就簡單分析一下實現原理。
首先，用到的css3特性有：
css3線性漸變linear-gradient，和-webkit-background-clip，-webkit-text-fill-color，這三個特性。
k歌效果比較簡單，先分析k歌效果吧。
1，乙個漸變的背景色
background-image: linear-gradient(to right, orange, green);background-image: linear-gradient(to right, orange 50%, green 0%);好，核心**已完成。剩下的就是把這個漸變的背景色填充到文字上面
3，填充字型顏色
就是這麼簡單。
第二個進度條效果：
其實就是乙個小技巧而已，k歌字型效果都出來了，地下在疊加一層背景色就ok了，這個背景色就是50%對應的顏色值，這裡就是green；
修改一下顏色值，就是下面這段**了：
50%
css3做乙個loading動畫效果（詳細思路）
純css3的動畫做效果 小人來回移動，碰到小球時，小球消失。首先，html搭建結構 css布局 要點1 這個移動的小人是用兩個半圓來實現 move top和move down這兩個子。看似乙個圓構成，但要做出嘴巴張開與閉合這個效果，乙個圓是不能做出來的，採用兩個圓定位重疊，用css的clip屬性將乙...
CSS3利用乙個div實現內圓角邊框效果
首先要清楚的是，box shadow的形狀會隨著border radius變化。下面的例子可以證明 doctype html html lang en head meta charset utf 8 title document title style type text css div.div3 ...
CSS3實現乙個開關按鈕控制項
又做了乙個左右滑動開關效果的核取方塊。效果圖 上圖左側為了顯示資料變化所以顯示出來，實際使用中設定display none屬性就可以了。本示例中全部使用html及css實現。lang en charset utf 8 title script text on.off circle radio lab...