醒目页面纯CSS和关闭按钮

Question

我发现用纯CSS代码此初始页面和揣摩，

1. 我怎么可以把它留淡出和消失代替。我尝试了几十次更改，但无法找到，只需点击关闭按钮即可使其保持原状并仅消失。

2. 此外，我想在消息div内的关闭按钮（也可能只是一个文本链接）。

3. 最后一个问题：我该如何切换旋转进入淡入淡出，旋出？

这里是链接到的代码示例： https://codepen.io/paulobrien/pen/AByuk

这是HTML：

<h1>This is the page</h1> 
<p><a href="#">Page content goes here : Page content goes here : </p> 
<div class="overlay-wrap"> 
     <input type="checkbox" name="hide" id="hide"> 
     <label class="hide" for="hide">Close Now</label> 
     <div class="overlay2"> 
       <div class="overlay"> 
         <div class="overlay-inner"> 
           <div class="message"> 
             <h2>This message will self destruct after 5 seconds</h2> 
             <p>No javascript required - Lorem...</p> 
           </div> 
         </div> 
       </div> 
     </div> 
</div> 

而且here`s的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:0;top:-999em;left:-999em;-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:0;top:-999em;left:-999em;-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:0;top:-999em;left:-999em;-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:0;top:-999em;left:-999em;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:0;top:-999em} 
} 
@-moz-keyframes fadein { 
0% {opacity: 0;top:10px;} 
20% {opacity:1;top:10px;} 
    80%{opacity:1;top:10px} 
100%{opacity:0;top:-999em 
} 
@-ms-keyframes fadein { 
0% {opacity: 0;top:10px;} 
20% {opacity:1;top:10px;} 
80%{opacity:1;top:10px} 
100%{opacity:0;top:-999em 
} 
@keyframes fadein { 
0% {opacity: 0;top:10px;} 
20% {opacity:1;top:10px;} 
80%{opacity:1;top:10px} 
100%{opacity:0;top:-999em} 
} 

谢谢你提前， Atilla

更新：Here`s新笔与实际的变化，我已经要求： https://codepen.io/great2gether/pen/JJyjxY/

Answer 1

他是用CSS3关键帧。看看第四行。首先不透明度为0，然后为1，当80％的时间消失时，不透明度将在关键帧所基于的最后20％时间内再次下降到0。

删除在每个关键帧（关于向效果有时只是不透明度）4号线，看看会发生什么:)

@keyframes fadein { 
0% {opacity: 0;top:10px;} 
20% {opacity:1;top:10px;} 
80%{opacity:1;top:10px} 
100%{opacity:0;top:-999em} 
} 

Answer 2

改变每个keyframes从这个最后一行：

100%{opacity:0;top:-999em;left:-999em;transform:rotate(720deg) scale(1.0)} 

对此：

100%{opacity:1;top:0;left:0;transform:rotate(720deg) scale(1.0)} 

启动画面已经有一个关闭按钮，所以没有n因此担心这一点。但是，为了防止它消失，改变每个keyframes从这个最后一行：

100%{opacity:0;top:-999em} 

这样：

100%{opacity:1;top:10px;} 

下面是修改代码：

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;} 
 
}

<h1>This is the page</h1> 
 
<p><a href="#">Page content goes here : Page content goes here : </p> 
 
<div class="overlay-wrap"> 
 
     <input type="checkbox" name="hide" id="hide"> 
 
     <label class="hide" for="hide">Close Now</label> 
 
     <div class="overlay2"> 
 
       <div class="overlay"> 
 
         <div class="overlay-inner"> 
 
           <div class="message"> 
 
             <h2>This message will self destruct after 5 seconds</h2> 
 
             <p>No javascript required - Lorem...</p> 
 
           </div> 
 
         </div> 
 
       </div> 
 
     </div> 
 
</div>