CSS是網頁制作中不可缺少的一部分，它可以控制網頁的樣式和布局。其中，鼠標點擊播放效果為網頁設計師經常使用的一種效果。下面我們來學習下如何使用CSS實現鼠標點擊播放的效果。

/* HTML代碼 */
/* CSS代碼 */
.container {
width: 600px;
height: 400px;
position: relative;
}
.box {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.play-button {
width: 80px;
height: 80px;
background: url('play.png') no-repeat center center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
cursor: pointer;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.video-active video {
display: block;
}

首先，在HTML中我們需要添加一個包含視頻和播放按鈕的容器。我們可以通過CSS設置容器的寬度、高度、位置以及容器內元素的尺寸和位置。

接下來，我們需要設置視頻的初始狀態，即不顯示。這可以通過設置 video 的 display 屬性為 none 來實現。同時，我們還需要給播放按鈕添加一個點擊事件，當點擊時，視頻就會顯示出來。 這里我們使用了 CSS3 新增的偽類 :active，來實現點擊播放的效果。當 .play-button 按鈕處于 active 狀態時，我們將 .box 元素添加一個 video-active 的類名，然后用 CSS 控制 video 的顯示與隱藏。

至此，一個簡單的鼠標點擊播放的效果就完成了，我們只需要添加視頻的鏈接即可。希望這篇文章能對你學習 CSS 有所幫助。