CSS 點擊動效可以讓網頁更加生動有趣，為用戶帶來良好的使用體驗。下面將介紹一些常見的 CSS 點擊動效。

.button{
background-color: #007bff;
color: #fff;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover{
background-color: #0056b3;
transform: translateY(-5px);
}
.button:active{
background-color: #003b80;
transform: translateY(0);
}

以上代碼實現了按鈕的點擊動效，包括鼠標懸浮、按下和松開時的背景色和位移變化。hover 選擇器表示當鼠標懸浮在元素上時，添加樣式；active 選擇器表示元素被激活時添加樣式（即當元素被點擊并松開鼠標時）。

.card{
position: relative;
width: 300px;
height: 200px;
background-color: #f5f5f5;
overflow: hidden;
cursor: pointer;
border-radius: 5px;
}
.card::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.card:hover::before{
top: 0;
}

以上代碼實現了一個卡片的點擊動效，鼠標懸浮在卡片上時會向上滑出一層半透明遮罩。卡片使用 overflow: hidden; 隱藏了溢出的內容，使用偽元素 ::before 創建遮罩層。遮罩層初始化時 top: 100% 在卡片下方，當鼠標懸浮在卡片上時使用 hover 選擇器將 top 值改為 0 從而實現向上滑出的動效。

以上兩個示例僅是 CSS 點擊動效的冰山一角，更多有趣實用的動效等待我們的發現。