色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

帶有純CSS和關閉按鈕的閃屏全屏視頻頁面

CSS
榮姿康2年前7瀏覽0評論

一切正常，除了當你關閉按鈕時，視頻仍在后臺播放。你會因為聲音而知道。當您單擊關閉按鈕時，如何停止視頻播放？

以下是代碼:

CSS:

html,body{
    height:100%;
    margin:0;
    padding:0;  
}
.overlay {
    opacity:0;
    position:fixed;
    top:-999em;
    left:-999em;
    width:100%;
    height:100%;
    display:table;
    background:rgba(0,0,0,0.8);
    -webkit-animation: splash 10s forwards;
  -moz-animation: splash 10s forwards; 
  -ms-animation: splash 10s forwards; 
  animation: splash 10s forwards;
}
.overlay-inner {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.message {
    border:10px solid red;
    border-radius:10px;
    background:#fff;
    display:inline-block;
    vertical-align:middle;
    width:50%;
    text-align:left;
    padding:10px;
}
@-webkit-keyframes splash {
  0%  {opacity: 0;top:0;left:0;-webkit-transform:rotate(0) scale(0.2)}
    20% {opacity:1;-webkit-transform:rotate(720deg) scale(1.0)}
    60% {opacity:1;}
    99% {top:0;left:0;}
    100%{opacity:1;top:0;left:0;-webkit-transform:rotate(720deg) scale(1.0)}
}
@-moz-keyframes splash {
   0% {opacity: 0;top:0;left:0;-moz-transform:rotate(0) scale(0.2)}
    20% {opacity:1;-moz-transform:rotate(720deg) scale(1.0)}
    60% {opacity:1;}
    99% {top:0;left:0}
    100%{opacity:1;top:0;left:0;-moz-transform:rotate(720deg) scale(1.0)}
}
@-ms-keyframes splash {
   0% {opacity: 0;top:0;left:0;-ms-transform:rotate(0) scale(0.2)}
    20% {opacity:1;-ms-transform:rotate(720deg) scale(1.0)}
    60% {opacity:1;}
    99% {top:0;left:0}
    100%{opacity:1;top:0;left:0;-ms-transform:rotate(720deg) scale(1.0)}
}  
@keyframes splash {
  0%  {opacity: 0;top:0;left:0;transform:rotate(0) scale(0.2)}
    20% {opacity:1;transform:rotate(720deg) scale(1.0)}
    60% {opacity:1;}
    99% {top:0;left:0}
    100%{opacity:1;top:0;left:0;transform:rotate(720deg) scale(1.0)}
}
.overlay-wrap {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:99;
}
.overlay-wrap .hide {
    position:absolute;
    top:-999em;
    right:10px;
    opacity:0;
    color:#fff;
    border:5px solid #fff;
    padding:10px;
    font-size:200%;
    z-index:2;
    cursor:pointer;
    -webkit-animation:10s fadein 2s forwards;
    -moz-animation:10s fadein 2s forwards;
    -ms-animation:10s fadein 2s forwards;
    animation:10s fadein 2s forwards;   
}
#hide {
    position:absolute;
    left:-999em;
    top:-999em;
}
.overlay2{
    position:absolute;
    opacity:1;
    -webkit-transition:all 2s;
    -moz-transition:all 2s;
    -ms-transition:all 2s;
    transition:all 2s ;
}
#hide:checked ~ div,#hide:checked ~ div *, #hide:checked + label {
 opacity:0;
 left:-999em;
 right:auto;
 top:-999em;
 pointer-events:none;
}
@-webkit-keyframes fadein {
 0% {opacity: 0;top:10px;}
 20% {opacity:1;top:10px;}
  80%{opacity:1;top:10px;}
  100%{opacity:1;top:10px;}
}
@-moz-keyframes fadein {
 0% {opacity: 0;top:10px;}
 20% {opacity:1;top:10px;}
  80%{opacity:1;top:10px;}
 100%{opacity:1;top:10px;}
}
@-ms-keyframes fadein {
 0% {opacity: 0;top:10px;}
 20% {opacity:1;top:10px;}
 80%{opacity:1;top:10px;}
 100%{opacity:1;top:10px;}
}
@keyframes fadein {
 0% {opacity: 0;top:10px;}
 20% {opacity:1;top:10px;}
 80%{opacity:1;top:10px;}
 100%{opacity:1;top:10px;}
}

超文本標記語言

<html>
<head>
    <link href="splash.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="overlay-wrap">
        <input type="checkbox" name="hide" id="hide">
        <label class="hide" for="hide">Close</label>
        <div class="overlay2">
                <div class="overlay">
                        <div class="overlay-inner">
                                <iframe id="player" src="https://www.youtube.com/embed/b6Z8wbmeASI?autoplay=1&mute=1&showinfo=0" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" allowfullscreen="true">
</iframe>
                        </div>
                </div>
        </div>
</div>
</body>
</html>

它是只在javascript中工作還是只用HTML和CSS就能完成？