css3仿视频播放器 |css 图片阻止回流

.video-container {
width: 640px;
height: 360px;
position: relative;
margin: 0 auto;
border: 3px solid #ddd;
background-color: #000;
}
/* 控制条 */
.control-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-color: rgba(0,0,0,0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
}
.control-bar .play-pause-btn {
width: 40px;
height: 40px;
background-image: url('../img/play-pause.png');
background-size: cover;
cursor: pointer;
}
.control-bar .play-pause-btn.playing {
background-image: url('../img/pause.png');
}
.control-bar .time {
color: #fff;
font-size: 14px;
}
.control-bar .time-bar {
width: 200px;
height: 4px;
background-color: #555;
margin: 0 10px;
}
.control-bar .current-time {
height: 100%;
width: 0;
background-color: #fff;
}
/* 全屏 */
.fullscreen {
width: 35px;
height: 35px;
background-image: url('../img/fullscreen.png');
background-size: cover;
cursor: pointer;
}

代码中，大家首先定义了一个父级容器.video-container，来包裹整个视频播放器，里面包含了视频画面和控制条。控制条是通过绝对定位来实现的，设置了底部和宽高，同时用了flex布局来让控制条中的按钮和时间显示自动排列。其中，播放/暂停按钮和全屏按钮是用背景图实现的。而时间条则是用背景色为#555的div+白色可变宽度的div来实现的。

另外，大家还定义了一个.playing类，用于在视频播放时切换图片。至于交互的逻辑，可以用JavaScript来实现，需要注意的是，大家需要处理好视频播放的时间以及全屏模式的切换。

以上就是CSS3实现仿视频播放器的方法，希望能对大家有所帮助。