1.滑鼠懸停變大
:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
緩慢變化需要在包住的外層加上：-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;
變大不超出的話就加上overflow:hidden;
2.滑鼠懸停整體旋轉
:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
緩慢變化需要在包住的外層加上：transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;
3.滑鼠懸停整體旋轉放大
:hover {
transform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
緩慢變化需要在包住的外層加上：transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;
4.滑鼠懸停整體上公升
:hover {
transform:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0,-10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);
緩慢變化需要在包住的外層加上：transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;
需要上公升載加一點陰影(加在hover裡面)：box-shadow:0px 5px 20px #ccc;
CSS3 中的一些簡單格式
css 1.格式 2.注意點 1.寫在head 標籤之間 2.type text css 預設也是這個 3.大多數情況下分號不能省略 樣式 1.行內樣式 直接將css 寫到開始標籤當中 2.內嵌標籤 可以在標籤中寫上一對style標籤，然後在style標籤中編寫css 3.外鏈樣式 單獨新建乙個.c...
css3的一些屬性
以前還沒有注意過css的一些屬性，近期發現有一些樣式很好用，現在整理一遍。keyframes 規定動畫 可以通過keyframes 改變乙個塊的樣式當然這是要配合animation屬性來結合的 keyframes mymove mymove必須定義動畫的名稱在 100 moz keyframes m...
CSS3 一些屬性
1.flex direction 調整主軸方向 預設為水平方向 包括row column row reverse column reverse 2.justify content 主軸方向對齊，可以調整元素在主軸方向上的對齊方式，包括flex start flex end center space ...