[分享]css3播放后始终显示

CSS3是一种强大的样式语言，可以实现众多特效，其中之一就是在播放视频或音频后始终显示。这种效果可以让用户随时查看播放进度和控制视频。 要实现这种效果，我们需要使用CSS3的属性控制视频控制器的位置，...

CSS3是一种强大的样式语言，可以实现众多特效，其中之一就是在播放视频或音频后始终显示。这种效果可以让用户随时查看播放进度和控制视频。
要实现这种效果，我们需要使用CSS3的position属性控制视频控制器的位置，同时使用z-index属性控制其在屏幕上的显示顺序。
接下来是一段示例代码，展示如何实现这种效果：

.video {
  position: relative;
}
<br>
.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
} 

在上面的代码中，我们首先将播放器的父元素设置为position: relative，这样我们才能控制其子元素的位置。接着，我们添加一个类名为.controls的元素作为控制器，并将其定位到父元素的底部，同时设置其z-index属性为1，使其位于其他元素之上。这样，即使视频播放时，控制器始终会显示在页面上。
总的来说，实现CSS3播放后始终显示的效果并不难，只需要使用position和z-index属性控制元素的位置和显示顺序。