HTML中的CSS特效是實現頁面效果的重要方式。CSS能夠通過樣式定義和選擇器來控制網頁的布局、顏色、字體、背景等樣式，還能夠實現一些比較炫酷的特效。 以下是一些有趣的CSS特效代碼：

1. 3D按鈕特效：

button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
button:hover {
background-color: #4CAF50;
color: white;
transform: translateY(-5px);
box-shadow: 0px 2px 10px #888888;
}

2. 懸浮動畫特效：

.box {
width: 200px;
height: 200px;
background-color: #4CAF50;
position: relative;
overflow: hidden;
}
.box:hover .inner-box {
transform: translateX(-100%);
}
.inner-box {
width: 200px;
height: 200px;
background-color: #03A9F4;
position: absolute;
left: 100%;
transition-duration: 0.5s;
}

3. 文字打字特效：

.text {
animation-duration: 3s;
animation-timing-function: steps(30, end);
animation-name: write;
animation-fill-mode: forwards;
white-space: nowrap;
overflow: hidden;
font-size: 30px;
}
@keyframes write {
from {
width: 0;
}
to {
width: 100%;
}
}

4. 輪廓特效：

button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
position: relative;
overflow: hidden;
}
button:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.8);
transition-duration: 0.4s;
z-index: -1;
}
button:hover:before {
width: 100%;
}

以上代碼只是CSS特效的冰山一角，通過學習和實踐，可以深入了解CSS的強大功能，并實現更加炫酷的頁面特效。