CSS3 簡單的砸金蛋樣式

1、滑鼠移入後，滑鼠樣式圖示變為「錘子」。

2、使用者砸金蛋，錘子簡單的揚起效果。

3、砸碎金蛋，顯示內容。

1、在html中插入一顆金蛋

找一張靜態或帶一點效果的動態圖，直接放入img標籤即可。

2、滑鼠移入，改變滑鼠樣式圖示

系統自帶的滑鼠樣式就那幾種，可以通過css修改，簡單的一句**：

1cursor: url("./img/chuizi1.png"), default;

只是需要給定改變樣式時的前提要求，此處要求是滑鼠移入改變，即hover時改變：

1

body>div aside label img:hover 

3、當使用者砸蛋時，讓錘子揚起來

因為只能使用css，那只有利用滑鼠的點選狀態（按住滑鼠左鍵）來實現了，當使用者點選滑鼠左鍵時，

移入顯示chuizi1,按住滑鼠左鍵顯示chuizi2，就會有一種把錘子揚起來的視覺效果。

4、使用者砸蛋過後，顯示結果

首先，砸金蛋分兩個狀態，砸蛋前、砸蛋後，前面三步為砸蛋前狀態，第四步為砸蛋後狀態，為了把狀態區分開，

想到偽類選擇器有訪問前和訪問後兩個狀態，但是只能用於鏈結標籤a，此處不適用，就想到了form表單

裡面的核取方塊，它有選中和不選中兩種情況，和砸蛋前、砸蛋後相符合，就用它了；

其次，狀態區別出來了，變為砸蛋後的狀態，要讓頁面當中內容改變，只有通過隱藏頁面中的，然後

把結果用背景圖的方式展示出來

/*

當選中時，隱藏 
*/body>div aside input:checked+label>img 

/*

當選中時，用背景的方式顯示結果 
*/body>div aside input:checked+label 

，這樣結果會過渡得更好看，動畫結果固定顯示：background-image: url("./img/dan5.jpg");

額，蛋碎的必須是自定義

CSS3布局樣式

css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的...

CSS3布局樣式

1.多列布局 columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面。columns column width column count 引...

css3新學習樣式

css3 1 旋轉角度 transform rotate 30deg 旋轉30度 2 圓角邊框 由小到大 border radius 25px moz border radius 25px old firefox 3 邊框陰影 box shadow box shadow 10px 10px 5px ...