CSS 視頻開始暫停按鈕是網站設計的重要組成部分之一，因為它能夠使用戶更好地控制視頻播放。
下面是一個簡單的例子，使用 CSS 制作一個視頻開始暫停按鈕：
<html>
<head>
<style>
.video-wrap {
position: relative;
overflow: hidden;
}
.play-btn {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.play-btn::before {
content: "";
position: absolute;
top: 20px;
left: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 30px;
border-color: transparent transparent transparent #000;
}
.play-btn.pause::before {
border-width: 0 0 0 20px;
margin-left: 10px;
}
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="video-wrap">
<video controls>
<source src="my-video.mp4">
</video>
<div class="play-btn"></div>
</div>
<script>
var video = document.querySelector("video");
var playBtn = document.querySelector(".play-btn");
playBtn.addEventListener("click", function() {
if (video.paused) {
video.play();
this.classList.remove("pause");
} else {
video.pause();
this.classList.add("pause");
}
});
</script>
</body>
</html>通過上面的代碼，我們可以看到使用 CSS 能夠輕松地制作一個漂亮的視頻開始暫停按鈕，并且結合 JavaScript 可以實現控制視頻播放功能。
上一篇cs6 css過渡屬性
下一篇css 訪問過的鏈接