[分享]css全屏鼠标移上去显示控制栏

CSS全屏鼠标移上去显示控制栏是一种常见的Web界面设计技巧。它可以为Web页面增添用户交互性和美观度。下面我们来看一下如何实现这一功能。/定义视频播放器/ .videoplayer { : rela...

CSS全屏鼠标移上去显示控制栏是一种常见的Web界面设计技巧。它可以为Web页面增添用户交互性和美观度。下面我们来看一下如何实现这一功能。

/*定义视频播放器*/
.video-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*定义视频的尺寸*/
.video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*定义控制栏*/
.video-player .controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s;
}

/*鼠标移上去显示控制栏*/
.video-player:hover .controls {
  opacity: 1;
}

/*控制栏中的按钮*/
.play-pause {
  margin: 0 10px;
  cursor: pointer;
} 

以上代码中，我们首先定义了视频播放器的样式，包括容器的位置、尺寸和溢出隐藏。接下来定义了视频的尺寸，使其填满整个容器，同时保持原有比例。然后定义了控制栏的样式，以及鼠标移上去时控制栏出现的过渡效果。

最后，我们定义了控制栏中的按钮样式，包括按钮之间的间距和鼠标指针的形状。

使用CSS全屏鼠标移上去显示控制栏，可以为视频播放器等Web应用增加更友好的用户体验，同时也提升了页面的美观度。