1. 技术文章
  2. Splash Page with Pure CSS and close button

Splash Page with Pure CSS and close button

由 倖福魔咒の 提交于 2019-12-13 03:50:04

问题


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

  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.

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

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

Here is the link to the code with example: https://codepen.io/paulobrien/pen/AByuk

This is the 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>

And here`s the 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}
}

Thank you in advance, Atilla

Update: Here`s the new Pen with the actual changes, that I have asked for: https://codepen.io/great2gether/pen/JJyjxY/


回答1:


He is using CSS3 keyframes. Look at the 4th line. First opacity is 0, then 1 and when 80% of the time is gone, the opacity will fall again to 0 the last 20% of time the keyframe is based on.

Delete the 4th line (sometimes only opacity regarding to the effect) in every keyframe and see what happens :)

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



回答2:


Change the last line of each keyframes from this:

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

to this:

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

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}

to this:

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

Here is the modified code:

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>


来源：https://stackoverflow.com/questions/44710881/splash-page-with-pure-css-and-close-button

标签
jquery
html
css
splash-screen
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!