CSS3有哪些新特性？

CSS3實現圓角 (border-radius: 8px)

陰影 (box-shadow: 10px)

對文字加特效 (text-shadow)

線性漸變（gradient）

旋轉（transform)：rotate(9deg)

縮放 (transform)：scale(0.85，0.90)

傾斜（transform)：skew（-9deg，0deg）

過渡效果（transition)

動畫效果（animation)

增加了更多的選擇器

---

CSS3選擇器

nth-child 

nth-last-child(n)

nth-of-type(n)

nth-last-of-type(n)

last-child

first-of-type

only-child

only-of-type

empty

checked

enabled

disabled

selection

not(s)

first-child：第一個直接字節點

 

---

 

CSS3的Animation

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @-webkit-keyframes animal {
            0% {
                opacity: 0;
                font-size: 12px;
            }

            100% {
                opacity: 1;
                font-size: 24px;
            }
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #f2f2f2;
            
            -webkit-animation-name: animal;
            -webkit-animation-duration: 1.5s;
            -webkit-animation-iteration-count: 4;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: ease-in-out;
        }
    </style>
    <div class="box">box</div>

animation有八個動畫屬性：

animation-name：              規定需要綁定到選擇器的keyframe名稱。

animation-duration：          規定完成動畫所花費的時候，以秒或毫秒計。

animation-timing-function：規定動畫的速度曲線， 設置動畫播放方式。

animation-delay：               規定動畫開始之前的延遲。

animation-iteration-count： 規定動畫播放的次數。

animation-direction：          規定是否應該輪流反向播放動畫。

animation-fill-mode：          規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。

animation-play-state：        指定動畫是否正在運行或已暫停。

 

語法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

keyframes被稱為關鍵幀，其類似於Flash中的關鍵幀。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes changebg {
            0% {
                background: red;
            }
            20% {
                background: blue;
            }
            40% {
                background: orange;
            }
            60% {
                background: green;
            }
            80% {
                background: yellow;
            }
            100% {
                background: red;
            }
        }
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
        .box:hover {
            animation: changebg 5s ease-out .2s;
        }
    </style>
    <div class="box">box</div>