[分享]css3播放后消失

CSS3播放后消失是指通过CSS3技术实现的一种效果，即在网页中嵌入视频或音频，达到播放的效果后自动消失，以提高网页的交互性和美观性。例： .video { : relative; } .video:...

CSS3播放后消失是指通过CSS3技术实现的一种效果，即在网页中嵌入视频或音频，达到播放的效果后自动消失，以提高网页的交互性和美观性。

例：
.video {
    position: relative;
}

.video:after {
    content: ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: rgba(0,0,0,0.6);
    z-index: 1; 
    opacity: 0; 
    transition: 0.3s; 
    pointer-events: none; 
}

.video:hover:after {
    opacity: 1; 
    pointer-events: auto;
}

.video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
} 

以上代码为实现该效果的一个简单演示。其中，通过设置伪元素的背景色为带alpha通道的黑色，以达到半透明的效果，并通过鼠标悬浮在播放器上时，将其透明度改为1，实现播放器的显隐切换。同时，设置video元素的宽度和高度为100%，在不同屏幕尺寸下均可自适应地播放视频。