CSS3是一種用于設計和布局網頁的強大語言，其中有一個非常重要的功能就是動畫效果。這些動畫可以通過一些簡單的代碼實現，可以讓網頁顯得更加生動和吸引人。
/* 一個簡單的動畫效果： */
div {
width: 100px;
height: 100px;
background-color: blue;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: blue;}
to {background-color: yellow;}
}上述代碼中，我們首先定義一個
元素，它的寬和高都是100像素，背景顏色是藍色。然后我們使用了一個CSS3動畫，它的名稱是example，持續時間為4秒。
接著，我們定義了一個名為example的關鍵幀（@keyframes）。這個關鍵幀定義了在動畫過程中，
元素應該如何變化。在這個例子中，我們將背景顏色從藍色變成了黃色。
/* 另一個動畫效果： */
div {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
div:hover {
animation-name: example;
animation-duration: 2s;
}
@keyframes example {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: red; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}這個例子中，我們仍然使用了一個
元素，并且在CSS中添加了一個:hover偽類來定義鼠標懸停時的動畫效果。
我們定義了一個名為example的關鍵幀，它在0%和100%時分別表示藍色，而在25%、50%、75%時變成了黃色、紅色和綠色。left和top屬性定義了元素在不同的關鍵幀中的位置，這樣可以使元素移動。
總的來說，CSS3動畫功能非常強大，可以為網頁添加很多生動和有趣的效果。我們只需要通過簡單的代碼就可以實現這些效果，非常方便。
上一篇nginx連接php方式
下一篇apache 打開php