頁面美化和頁面特效
圖片邊框
語法：border-image: border-image-source border-image-slice border border-image-width border-image-repeat；
屬性
<style type="text/css">
border-image-source:路徑
border-image-slice:圖片切割位置
border-image-width: 邊框寬度
border-image-repeat: 排列方式 （常用取值如下）
space:在不切斷圖片的情況下，平鋪圖片並保留一定間距填滿整個空間
repeat:平鋪切分圖填滿整個空間
stretch:拉伸切分圖填滿整個空間（默認值）
round:平鋪並拉伸填滿整個空間，不切割圖片
</style>
過渡
1. 過渡屬性
<style type="text/css">
body:hover{
transition-delay: ; 過渡開始前的延遲（延遲）
transition-duration: ; 過渡持續時間（時間）
transition-property: ; 應用過渡的屬性（樣式）
transition-timing-function: ; 過渡期間計算中間值（速度曲線）
transform: ; 過渡的簡寫
}
</style>
2. 過渡速度值
<style type="text/css">
body:hover{
transition-timing-function: ;常用屬性值
ease:慢速開始，接着加速，然後慢速結束（默認值）
linear:相同速度開始到結束
ease-in:慢速開始
ease-out:慢速結束
ease-in-out:慢速開始，慢速結束
}
</style>
動畫
1. 語法
<style type="text/css">
@keyframes name{
from{
起始樣式}
to{
結束樣式}
}
或
@keyframes name{
0%{
樣式}
50%{
樣式}
100%{
樣式}
}
標籤名：動作{
animation:關鍵幀名 持續時間 動畫速度 延遲時間 播放次數 ;
}
</style>
2. 動畫屬性
<style type="text/css">
animation-delay: ; 開始前延遲時間
animation-direction: ; 循環播放時間和是否反向播放 取值：normal 或 alternate
animation-duration: ; 動畫播放的持續時間
animation-iteration-count: ; 動畫播放次數 取值：infinite 或 數值
animation-name: ; 動畫名稱
animation-play-state: ; 允許動畫暫停和重新播放 取值：running 或 paused
animation-timing-function: ; 動畫期間計算中間值的方式，確定動畫播放速度的變化
</style>
平移、縮放、旋轉、傾斜
1.變換屬性
| 屬性 | 說明 |
|---|---|
| transform | 應用的變換功能 |
| transform- origin | 變換的起點 |
2. transform的屬性值
| 屬性 | 說明 |
|---|---|
| translate(< 長度值或百分數值>) | 指定在水平和垂直兩個方向上平移元素 |
| translateX(<長度值或百分數值>) | 指定在水平方向上平移元素 |
| translateY(<長度值或百分數值>) | 指定在垂直方向上平移元素 |
| scale(<數值>) | 指定在水平和垂直兩個方向上縮放元素 |
| scaleX(<數值>) | 指定在水平方向上縮放元素 |
| saleY(<數值>) | 指定在垂直方向上縮放元素 |
| rotate(<角度>) | 旋轉元素 |
| skew(<角度>) | 指定在水平和垂直兩個方向上使元素傾斜一定的角度 |
| skewX(<角度>) | 指定在水平方向上使元素傾斜一定的角度 |
| skewY(<角度>) | 指定在垂直方向上使元素傾斜一定的角度 |
| matrix（4~6個數值，逗號隔開） | 指定自定義變換 |
3. transform- origin屬性的值
| 屬性 | 說明 |
|---|---|
| <%> | 指定元素X軸或者Y軸的起點 |
| <長度值> | 指定距離 |
| left | 指定X軸上的位置 |
| center | 指定X軸上的位置 |
| right | 指定X軸上的位置 |
| top | 指定Y軸上的位置 |
| center | 指定Y軸上的位置 |
| bottom | 指定Y軸上的位置 |
4. CSS3中的角度單位
| 屬性 | 說明 |
|---|---|
| deg | 角度(degrees) |
| grad | 梯度(gradians) |
| rad | 弧度(radians) |
| turn | 轉、圈(turns) |
綜合樣例
在index.html中使用ul-li實現導航菜單。編寫Css樣式規則，美化頁面，對每個 li 標籤設置內部陰影，將背景顏色設置爲#c3c7c3,並且設置顯示左邊框，而右邊框設爲半徑爲20px的圓角。使用li:hover屬性實現鼠標懸停時的樣式:背景色設爲#222222，li 寬度更改爲200px，邊框陰影更改爲外陰影偏移5px，將動畫屬性設置爲無限循環次數(infinite )和結束後反向播放( alternate)，最終出現閃爍顯示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>綜合樣例</title>
<style type="text/css">
ul{
width: 300px;
list-style: none;
}
ul li{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: #c3c7c3;
border-left: solid 1px black;
box-shadow: inset 0 0 15px #8A2BE2;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
@keyframes meunm{
to{
width: 200px;
background: #222222;
color: #008000;
box-shadow: 5px 5px 15px black;
}
}
li:hover{
animation: meunm 600ms linear 10ms alternate infinite;
}
</style>
</head>
<body>
<ul>
<li>訂單管理</li>
<li>商品管理</li>
<li>客戶管理</li>
<li>類別管理</li>
<li>權限管理</li>
</ul>
</body>
</html>