使用纯CSS和关闭按钮

时间：2017-06-22 23:34:53

标签： jquery html css splash-screen

我发现这个Splash页面带有纯CSS代码，并试图弄明白，

  1. 我怎样才能让它停留而不是消失和消失。我尝试了几十个更改但却无法找到，只需单击关闭按钮就可以使其保持原状并且只会消失。

  2. 另外我想在消息div内部关闭按钮（也可能只是一个textlink）。

  3. 最后一个问题：如何将旋转切换为淡入和淡出，旋转？

    4. 以下是代码的链接示例： 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

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

2 个答案:

答案 0 :(得分：0)

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

删除每个关键帧中的第4行（有时只对效果有不透明度），看看会发生什么：）

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

答案 1 :(得分：0)

从此处更改每个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)}

启动画面已经有一个关闭按钮，因此无需担心。但为了防止它消失，请更改每个keyframes的最后一行：

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

到此：

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

以下是修改后的代码：

＆＃13;
＆＃13; 
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;}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题