> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_basic/css-advance/jian_dan_de_te_xiao.md).
# 簡單的特效
### 改變字型
在這之前，介紹一個字型的網站 Fade in
```
2.淡出
```
.fade
{
opacity:1;
}
.fade:hover
{
opacity:0.5;
}
```
3.滑鼠滑入時更改顏色
```
Change Color
```
4.放大
```
.color:hover
{
transform: scale(1.3);
background:#53a7ea;
}
```
5.縮小
```
.color:hover
{
transform: scale(0.3);
background:#53a7ea;
}
```
6.旋轉縮小
```
.color:hover
{
transform: scale(0.3) rotateZ(-30deg);
background:#53a7ea;
}
```
7.變換外框形狀
```
.color:hover
{
border-radius:50%;
background:#53a7ea;
}
```
8.重疊陰影效果
```
.color:hover
{
box-shadow:
10px 10px #53a7ea,
20px 20px #53a7ea,
30px 30px #53a7ea;
transform: translateX(-30px);
}
```
9.震動效果
```
/* 定義關鍵影格 */
@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/*套用*/
.color:hover
{
animation: swing 1s ease;
}
```
10.往內的邊框
```
.color:hover
{
box-shadow: inset 0 0 0 25px #53a7ea;
}
```
11.視差捲動
```
```
解說:
`perspective`為人們看元素的距離(數字越大越近看)
`translateZ`為Z軸的坐標
`scale`放大元素
(想像坐在車上時觀看窗外月亮，沒有移動，但窗外樹叢卻移動很快，同樣道理)
