CSS3是一種強大的樣式語言，可以使網頁獲得更多的交互效果和視覺效果。其中一個很酷的功能就是直播，即通過CSS3實現動態流媒體視頻的效果。下面我們來看一下如何使用CSS3實現直播。

.live {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 100%;
background: linear-gradient(#f7f7f7, #eee);
overflow: hidden;
}
.live:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
z-index: 1;
background: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity ease 0.5s;
}
.live:hover:before {
opacity: 1;
}
.video {
position: relative;
z-index: 2;
height: 100%;
}
.video:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
z-index: 3;
background: url("video-play-button.png");
background-size: contain;
background-repeat: no-repeat;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity ease 0.5s;
}
.video:hover:before {
opacity: 1;
}

以上就是實現CSS3直播的代碼，主要是通過:before偽類來實現浮層和鼠標懸停效果。其中.live類是直播容器，.video類是視頻播放器。背景使用了線性漸變效果，可以根據需求自定義。同時，鼠標懸停按鈕的圖標也需要替換成自己喜歡的圖標。