用于褪色覆盖视频控件的CSS

css for fading overlaid video controls?

本文关键字：CSS 控件 视频 褪色 覆盖 用于      更新时间：2023-09-26

在一些DVD/视频播放器中，播放/暂停/音量等控件被覆盖在视频本身的顶部。当你移动鼠标时，控件会逐渐淡出，然后，在一段时间后，淡出(这样你就可以再次欣赏视频了)。

我想知道-如何使用CSS创建这种效果?是否有一种方法来重置淡出定时器的事件，而不是身体鼠标移动?

假设我们有以下HTML模板:

<div class="player">
    <div class="controls">Controls go here</div>
</div>

这是可能的，如果你使用CSS transition-delay: http://jsfiddle.net/teddyrised/7sBwA/

.player {
    background-color: #333;
    position: relative;
    width: 100%;
    height: 400px;
}
.controls {
    background-color: rgba(0,0,0,.5);
    border-radius: 5px;
    color: #eee;
    padding: 1em;
    position: absolute;
    left: 2em;
    right: 2em;
    bottom: 2em;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    transition-delay: 0;
}
    .player:hover .controls {
        pointer-events: auto;
        opacity: 1;
    }
    .player:not(:hover) .controls {
        transition-delay: .5s;
    }

但是，如果你想要更好的浏览器支持，你应该使用JS。

在使用jQuery时，可以在使用jQuery效果时利用.delay()方法，例如我们示例中的.fadeOut(): http://jsfiddle.net/teddyrised/g7kge/

JS: 

$(document).ready(function(){
    $(".player .controls").hide();
    $(".player").hover(
        function(){
            // Mouse enters. Fade in controls
            $(this).find(".controls").fadeIn();
        },
        function(){
            // Mouse leaves. Delay controls fade out by 1000ms
            $(this).find(".controls").delay(1000).fadeOut();
        });
});

可以使用CSS:

来控制淡出定时器
-(prefix)-transition: all <duration> ease-out <delay>;

看这提琴

相关文章：