**思路：**利用偽類重新生成同樣的字型，且和原字型在豎直位置重合，在水平位置錯開約2個px，利用動畫使偽類的高度發生變化，同時利用一條直線跟隨偽類高度的變化。
body
position: relative;
top: 300px;
left: 300px;
width:250px;
font-size: 40px;
line-height: 40px;
height:40px;
}content:attr(data-word);
font-size: 40px;
position: absolute;
top: 0;
left: -2px;
overflow: hidden;
animation:afteranima 1.5s linear infinite;
}@keyframes afteranima
25%50%
100%
}content:attr(data-word);
font-size: 40px;
position: absolute;
top: 0;
left: -2px;
overflow: hidden;
animation:beforeanima 1.5s linear infinite;
}@keyframes beforeanima
25%50%
100%
}@keyframes whitelineanima
25%50%
100%
}.whiteline
css3 製作漸變
先了解一下目前的幾種現代瀏覽器的核心，主流內容主要有 mozilla gecko 熟悉的有firefox，flock等瀏覽器 moz webkit 熟悉的有safari chrome等瀏覽器 webkit opera presto opera瀏覽器 o trident ie瀏覽器 線性漸變 line...
css3製作圓角按鈕
使用 css3 製作圓角按鈕，無需 首先來看看效果圖 html 就這麼簡單 button button button 如果沒有 css 那麼上面的 html 執行起來是這樣的 開始 css3 的編寫 button一些不同顏色的按鈕樣式 green blue color blue gray color...
CSS3之圓角製作
如今css3中的border radius出現後，讓我們沒有那麼多的煩惱了，首先製作圓角的時間是省了，而且其還有多個優點 其一減少 的維護的工作量，少了對的更新製作，的替換等等 其 二 提高 的效能，少了對進行http的請求，網頁的載入速度將變快 其三增加視覺美觀性。既然border radius有...