今天是火影忍者（漫畫）宣告完結的日子，也是我首發的第乙個隨筆。看過火影的朋友都知道，寫輪眼是什麼，這裡就不多說了。以下就直接展示整個效果，上張圖，先睹為快：
眼下已經測試 ie10、firefox瀏覽器、chrome瀏覽器、opera瀏覽器、360瀏覽器（兩種模式）相容已通過。
html**：
1<
div
class
="container"
>23
<
div
class
="eyesboxs pullleft"
>
4<
div
class
="profile skewleft"
>
div>
5<
div
class
="shadow skewleft"
>
div>
6<
div
class
="basic ani-narrow"
>
div>
7<
div
class
="eyes ani-zoom"
>
8<
div
class
="line"
>
9<
div
class
="hook ani-rotatehook"
>
10<
span
class
="bar"
><
b>
b>
span
>
11<
span
class
="bar"
><
b>
b>
span
>
12<
span
class
="bar"
><
b>
b>
span
>
13div
>
14<
div
class
="tube ani-rotatetube"
>
15<
span
class
="bar"
>
span
>
16<
span
class
="bar"
>
span
>
17<
span
class
="bar"
>
span
>
18div
>
19div
>
20div
>
21<
div
class
="trans skewleft"
>
22<
span
class
="bar ani-shadow"
>
span
>
23div
>
24div
>
2527
28<
div
class
="eyesboxs pullright"
>
29<
div
class
="profile skewright"
>
div>
30<
div
class
="shadow skewright"
>
div>
31<
div
class
="basic ani-narrow"
>
div>
32<
div
class
="eyes ani-zoom"
>
33<
div
class
="line"
>
34<
div
class
="hook ani-rotatehook"
>
35<
span
class
="bar"
><
b>
b>
span
>
36<
span
class
="bar"
><
b>
b>
span
>
37<
span
class
="bar"
><
b>
b>
span
>
38div
>
39<
div
class
="tube ani-rotatetube"
>
40<
span
class
="bar"
>
span
>
41<
span
class
="bar"
>
span
>
42<
span
class
="bar"
>
span
>
43div
>
44div
>
45div
>
46<
div
class
="trans skewright"
>
47<
span
class
="bar ani-shadow"
>
span
>
48div
>
49div
>
5051
div>
純CSS3製作正方體
css3 允許您使用 3d 轉換來對元素進行格式化。rotatex x軸旋轉，圍繞其在乙個給定度數x軸旋轉的元素。div rotatey y軸旋轉，圍繞其在乙個給定度數y軸旋轉的元素。div rotatez z軸旋轉，圍繞其在乙個給定度數z軸旋轉的元素。div 掌握好rotatex,rotatey,...
純css3製作簡易鐘錶時鐘
效果 具體的思路就是外邊是乙個大的圓 clock中是乙個小的圓點在中心 center時針分針秒針都是使用細的長方形 hour point seconds 大的刻度用兩個不同的長方形做成乙個十字架的形狀 div1 div2 用乙個小的白圓蓋在這個十字架上使用z index讓圓覆蓋在十字架上被時針分針秒...
漂亮的載入等待動畫，用純CSS3製作
下面展示的是一批完全只用css製作的載入等待動畫效果。每個動畫只運用了簡單的css屬性，沒有任何繁重的渲染動作和布局計算，都是非常輕量級的 作者將這些css動畫 收集到了loaders.css，你可以輕鬆的將這個css檔案嵌入到你的頁面中，然後在需要放置loading圖示的地方加入下面的 除了這種方...