CSS3是一種用于網(wǎng)站設(shè)計(jì)的樣式語(yǔ)言，在網(wǎng)頁(yè)設(shè)計(jì)中起到控制網(wǎng)頁(yè)外觀和布局的作用。學(xué)習(xí)CSS3需要掌握基礎(chǔ)語(yǔ)法、選擇器、顏色和背景、文本效果、變形和過渡以及動(dòng)畫和響應(yīng)式布局等知識(shí)。

/*CSS3基本語(yǔ)法*/
selector {
property: value;
}
/*CSS3選擇器*/
element {
/*屬性選擇器*/
attribute="value" {}
/*偽類選擇器*/
:hover {}
/*偽元素選擇器*/
::before {}
/*組合選擇器*/
element1 element2 {}
/*兄弟選擇器*/
element1 ~ element2 {}
/*子選擇器*/
element1 >element2 {}
}
/*CSS3顏色和背景*/
body {
/*顏色*/
color: #333333;
/*背景*/
background-color: #ffffff;
/*背景圖片*/
background-image: url(../images/background.png);
}
/*CSS3文本效果*/
h1 {
/*字體*/
font-family: Arial, sans-serif;
/*大小*/
font-size: 24px;
/*加粗*/
font-weight: bold;
/*下劃線*/
text-decoration: underline;
/*文字陰影*/
text-shadow: 1px 1px #cccccc;
}
/*CSS3變形和過渡*/
div {
/*旋轉(zhuǎn)*/
transform: rotate(30deg);
/*縮放*/
transform: scale(1.5);
/*位移*/
transform: translate(100px, 50px);
/*過渡*/
transition: all 2s ease-in-out;
}
/*CSS3動(dòng)畫*/
@keyframes my-animation {
from {
opacity: 0;
}
to {
opacity: 1;
transform: rotate(360deg);
}
}
div {
/*動(dòng)畫名稱*/
animation-name: my-animation;
/*動(dòng)畫時(shí)間*/
animation-duration: 2s;
/*動(dòng)畫次數(shù)*/
animation-iteration-count: infinite;
/*動(dòng)畫方向*/
animation-direction: alternate;
/*動(dòng)畫曲線*/
animation-timing-function: ease-in-out;
}
/*CSS3響應(yīng)式布局*/
@media screen and (max-width: 768px) {
/*移動(dòng)端樣式*/
body {
font-size: 16px;
}
}

掌握CSS3基本語(yǔ)法和選擇器后，學(xué)習(xí)顏色和背景、文本效果、變形和過渡以及動(dòng)畫和響應(yīng)式布局等進(jìn)階知識(shí)，可以打造更加炫酷的網(wǎng)頁(yè)效果。