使用纯CSS和关闭按钮启动页面 [英] Splash Page with Pure CSS and close button

查看：100
本文介绍了使用纯CSS和关闭按钮启动页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我找到了包含纯CSS代码的Splash页面，并尝试找出

I found this Splash page with pure CSS code and try to figure out,

  1. 我如何使它停留而不是消失和消失.我尝试了数十种更改，但找不到答案，只是为了使更改保留在原位置，并且仅在单击关闭按钮后消失，该更改什么.

  1. how I can make it stay instead of fading out and disappearing. I tried dozens of changes but could not find out, what to change just to make it stay where it is and only disappear, when the close button is clicked.

另外，我想在消息div中使用关闭按钮(也可以只是文本链接).

And additionaly I would like the close button (could be just a textlink, too) inside of the message div.

最后一个问题:如何将旋转入"切换为渐入和渐出"，再切换为旋出"?

Last question: How can I switch of the rotating in to fading in and the fading out, to rotating out?

这是带有示例的代码链接: https://codepen.io/paulobrien/pen/AByuk

Here is the link to the code with example: 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>

这是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

Thank you in advance, Atilla

更新:这是我要求的带有实际更改的新笔: https://codepen.io/great2gether/pen/JJyjxY/

推荐答案

从此更改每个keyframes的最后一行:

Change the last line of each keyframes from this:

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

初始屏幕已经具有关闭按钮，因此无需担心.但是为防止其消失，请从此更改每个keyframes的最后一行:

The splash screen already has a close button, so no need to worry about that. But to prevent it from disappearing, change the last line of each keyframes from this:

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>

这篇关于使用纯CSS和关闭按钮启动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆