[分享]css3动画重新播放器

CSS3动画重新播放器是一款优秀的多媒体播放器，它可以使用CSS3动画来实现各种交互效果，具有良好的用户体验。下面是该播放器的一些代码：.videowrapper { : relative; marg...

CSS3动画重新播放器是一款优秀的多媒体播放器，它可以使用CSS3动画来实现各种交互效果，具有良好的用户体验。下面是该播放器的一些代码：

.video-wrapper {
  position: relative;
  margin-bottom: 20px;
  padding-top: 56.25%;
  overflow: hidden;
}

.video-wrapper .video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.video-wrapper .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.video-wrapper .play-btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 40px solid #333;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  transition: all 0.3s ease-out;
}

.video-wrapper .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.video-wrapper .play-btn:hover i {
  width: 40px;
  height: 50px;
  border-left: 20px solid #333;
}

.video-wrapper.play .play-btn {
  display: none;
}

.video-wrapper.play .video {
  animation: play-video 0.5s linear;
}

@keyframes play-video {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
} 

这是一个基础的动画播放器，它有一个视频容器、一个播放按钮和一个播放动画，当用户点击播放按钮时，播放动画就会开始，视频开始播放。我们可以根据需要进行修改和扩展，让它更符合我们的实际需求。