制作播放暂停
按钮可以使用HTML5的`<video>`标签和JavaScript来实现。下面是一个示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>视频播放器</title>
<style>
/* 播放
按钮和暂停
按钮的
样式 */
.play-button, .pause-button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 10px;
}
/* 暂停
按钮的
样式 */
.pause-button {
display: none;
}
</style>
</head>
<body>
<video src="video.mp4" controls></video>
<div class="play-button"></div>
<div class="pause-button"></div>
<script>
// 获取视频元素
var video = document.querySelector('video');
// 获取播放
按钮和暂停
按钮
var playButton = document.querySelector('.play-button');
var pauseButton = document.querySelector('.pause-button');
// 点击播放
按钮
playButton.onclick = function() {
// 隐藏播放
按钮，显示暂停
按钮
playButton.style.display = 'none';
pauseButton.style.display = 'block';
// 播放视频
video.play();
};
// 点击暂停
按钮
pauseButton.onclick = function() {
// 隐藏暂停
按钮，显示播放
按钮
pauseButton.style.display = 'none';
playButton.style.display = 'block';
// 暂停视频
video.pause();
};
</script>
</body>
</html>
```
关于
CSS播放暂停
按钮切换动画
特效，可以使用
CSS3的`transition`属性来实现。下面是一个示例代码：
```
css
/* 播放
按钮和暂停
按钮的
样式 */
.play-button, .pause-button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 10px;
transition: transform .2s ease-in-out;
}
/* 暂停
按钮的
样式 */
.pause-button {
display: none;
}
/* 鼠标悬停时的
样式 */
.play-button:hover, .pause-button:hover {
transform: scale(1.1);
}
/*
切换动画
特效 */
.play-button.hide, .pause-button.show {
transform: scale(0);
}
.pause-button.show, .play-button.hide {
transform: scale(1);
}
```
在JavaScript代码中，当点击播放
按钮时，使用`element.classList`属性来给播放
按钮添加`hide`类，给暂停
按钮添加`show`类；当点击暂停
按钮时，使用`element.classList`属性来给暂停
按钮添加`hide`类，给播放
按钮添加`show`类。这样就可以通过
CSS3的`transition`属性来实现
按钮切换的动画
特效了。
1974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
