CSS3是前端開發中較為常用的技術之一，它不僅可以為頁面增加更加炫酷的效果，還可以提升用戶的使用體驗。下面將介紹幾種經典的CSS3應用案例。

/*半透明遮罩*/
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/*圓角框*/
.box {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #dcdcdc;
padding: 20px;
}
/*動畫效果*/
.box:hover {
-webkit-animation: zoomIn 0.5s;
-moz-animation: zoomIn 0.5s;
animation: zoomIn 0.5s;
}
@keyframes zoomIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

第一種經典的CSS3應用是半透明遮罩，可以使用rgba函數為頁面添加半透明遮罩層，通過position屬性將遮罩層設為fixed定位，以確保其覆蓋整個視口。同時，使用top、left、width和height屬性控制遮罩層的位置和大小。

第二種經典的CSS3應用是圓角框，可以使用border-radius屬性為盒子添加圓角效果，同時需要使用-webkit-border-radius和-moz-border-radius來兼容不同的瀏覽器。同時，設置盒子的背景顏色和padding屬性以美化其外觀和樣式。

第三種經典的CSS3應用是動畫效果，通過使用@keyframes關鍵詞定義動畫，再使用animation屬性指定動畫效果。同時，使用:hover偽類選擇器控制動畫的觸發條件，當鼠標滑過盒子時，使用transform屬性將盒子從小到大縮放，從而實現動畫效果。