Jquery 带有纯CSS和关闭按钮的启动页面

我找到了这个带有纯CSS代码的启动页面，并试图弄明白

我怎样才能让它停留而不是消失。我尝试了几十次更改，但都找不到要更改什么，只是为了让它停留在原来的位置，然后在单击“关闭”按钮时消失

另外，我希望在message div中有close按钮（也可能只是一个文本链接）

最后一个问题：我怎样才能从旋转进入切换到淡入淡出，再切换到旋转离开

以下是指向代码的链接和示例：

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

提前谢谢大家,， 阿提拉

更新：这是我要的带有实际更改的新钢笔：

---

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

删除每个关键帧中的第四行（有时仅与效果相关的不透明度），然后查看发生了什么：）

---

更改每个关键帧的最后一行，如下所示：

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

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

为此：

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

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

启动屏幕已经有一个关闭按钮，所以不必担心。但为了防止其消失，请将每个关键帧的最后一行更改为：

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

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

为此：

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

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

以下是修改后的代码：

html，正文{
身高：100%；
保证金：0；
填充：0；
}
.覆盖{
不透明度：0；
位置：固定；
顶部：-999em；
左：-999em；
宽度：100%；
身高：100%；
显示：表格；
背景：rgba（0,0,0,0.8）；
-webkit动画：向前飞溅10秒；
-moz动画：向前飞溅10秒；
-ms动画：向前飞溅10秒；
动画：向前飞溅10秒；
}
.覆盖内部{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.留言{
边框：10px纯红；
边界半径：10px；
背景：#fff；
显示：内联块；
垂直对齐：中间对齐；
宽度：50%；
文本对齐：左对齐；
填充：10px；
}
@-webkit关键帧飞溅{
0%{不透明度：0；顶部：0；左侧：0；-webkit变换：旋转（0）比例（0.2）}
20%{不透明度：1；-webkit变换：旋转（720deg）比例（1.0）}
60%{不透明度：1；}
99%{顶部：0；左侧：0；}
100%{不透明度：1；顶部：0；左侧：0；-webkit变换：旋转（720deg）比例（1.0）}
}
@-moz关键帧飞溅{
0%{opacity:0；top:0；left:0；-moz变换：旋转（0）比例（0.2）}
20%{不透明度：1；-moz变换：旋转（720deg）比例（1.0）}
60%{不透明度：1；}
99%{顶部：0；左侧：0}
100%{不透明度：1；顶部：0；左侧：0；-moz变换：旋转（720deg）比例（1.0）}
}
@-ms关键帧飞溅{
0%{不透明度：0；顶部：0；左侧：0；-ms变换：旋转（0）比例（0.2）}
20%{不透明度：1；-ms变换：旋转（720deg）比例（1.0）}
60%{不透明度：1；}
99%{顶部：0；左侧：0}
100%{不透明度：1；顶部：0；左侧：0；-ms变换：旋转（720deg）比例（1.0）}
}  
@关键帧飞溅{
0%{不透明度：0；顶部：0；左侧：0；变换：旋转（0）比例（0.2）}
20%{不透明度：1；变换：旋转（720deg）比例（1.0）}
60%{不透明度：1；}
99%{顶部：0；左侧：0}
100%{不透明度：1；顶部：0；左侧：0；变换：旋转（720deg）比例（1.0）}
}
.覆膜{
位置：固定；
排名：0；
左：0；
右：0；
z指数：99；
}
.覆盖包裹。隐藏{
位置：绝对位置；
顶部：-999em；
右：10px；
不透明度：0；
颜色：#fff；
边框：5px实心#fff；
填充：10px；
字体大小：200%；
z指数：2；
光标：指针；
-webkit动画：10s fadein 2s向前；
-moz动画：10s fadein 2s向前；
-ms动画：10秒fadein 2秒向前；
动画：10秒fadein 2秒向前；
}
#隐藏{
位置：绝对位置；
左：-999em；
顶部：-999em；
}
.覆盖2{
位置：绝对位置；
不透明度：1；
-webkit转换：所有2；
-moz转换：所有2s；
-ms转换：全部2秒；
过渡：所有2；
}
#隐藏：选中~div，#隐藏：选中~div*，#隐藏：选中+标签{
不透明度：0；
左：-999em；
右：自动；
顶部：-999em；
指针事件：无；
}
@-webkit关键帧fadein{
0%{不透明度：0；顶部：10px；}
20%{不透明度：1；顶部：10px；}
80%{不透明度：1；顶部：10px；}
100%{不透明度：1；顶部：10px；}
}
@-moz关键帧fadein{
0%{不透明度：0；顶部：10px；}
20%{不透明度：1；顶部：10px；}
80%{不透明度：1；顶部：10px；}
100%{不透明度：1；顶部：10px；}
}
@-ms关键帧fadein{
0%{不透明度：0；顶部：10px；}
20%{不透明度：1；顶部：10px；}
80%{不透明度：1；顶部：10px；}
100%{不透明度：1；顶部：10px；}
}
@关键帧淡入淡出{
0%{不透明度：0；顶部：10px；}
20%{不透明度：1；顶部：10px；}
80%{不透明度：1；顶部：10px；}
100%{不透明度：1；顶部：10px；}
}

这是页面
页面内容位于此处：页面内容位于此处：

现在关门
此消息将在5秒后自毁
不需要javascript-Lorem

我已经替换了您在以下位置提到的行：

@-webkit keyframes splash@-moz keyframes splash@-ms keyframes splash@keyframes splash

但到目前为止没有任何更改。我知道，这是一个复制/粘贴错误，您发表评论时我正在更新我的答案。现在就去看看。啊，好的，太棒了！是的，现在它保持在原来的位置，只有当你点击按钮时才会消失。非常感谢！你也能帮我吗？我怎样才能让它淡入而不是旋转？对于一些网站，我认为这个版本可能有点好玩。我想说，就像每个网站一样。太棒了：）我准备了一支新的钢笔，上面有你更新的代码，然后把结尾改成了一个X——这很简单。只需删除每个

关键帧中的
旋转（720deg）
。到目前为止还看不到发生了多少事情：/尝试时对您有效吗？