前言
这次给大家带来一个开屏的效果，由纯CSS实现，实现起来并不复杂，效果也并不简单，话不多说，咱们直入主题。
效果预览
效果如下所示。
HTML部分
首先看到HTML部分，相关代码如下。
<nav class="main">
<a href="#terrestrial" class="open-popup">terrestrial animals</a>
<a href="#aquatic" class="open-popup">aquatic animals</a>
</nav>
<section id="terrestrial" class="popup">
<a href="#" class="back">< back</a>
<p>🦓🦒🐅🐆🐘🦏🐃🦌🐐🐫</p>
</section>
<section id="aquatic" class="popup">
<a href="#" class="back">< back</a>
<p>🐋🐳🐬🐟🐠🐡🐙🦑🦐🦀</p>
</section>
这里包含了一个导航条和两个弹出窗口。<nav class="main">是主导航条的部分。包含了两个链接，分别链接到页面中的不同部分。<a href="#terrestrial" class="open-popup">terrestrial animals</a> 和 <a href="#aquatic" class="open-popup">aquatic animals</a>这两个链接标签（<a>）作为导航链接，包含了类名open-popup，当这些链接被点击时会弹出相关的窗口。<section id="terrestrial" class="popup"> 和 <section id="aquatic" class="popup">这两个部分分别代表了两个弹出的窗口内容。每一个窗口内容块中包含了一个返回的链接（< back）和相应类别的动物表情。
综上所述，这里构建了一个包含导航条和两个弹出窗口的结构，点击不同的链接可以弹出对应的内容窗口，用于显示相关的动物表情。
CSS部分
接着看到CSS部分。相关代码如下。
.main {
height: inherit;
background: linear-gradient(dodgerblue, darkblue);
display: flex;
align-items: center;
justify-content: center;
}
.open-popup {
box-sizing: border-box;
color: white;
font-size: 16px;
font-family: sans-serif;
width: 10em;
height: 4em;
border: 1px solid;
text-align: center;
line-height: 4em;
text-decoration: none;
text-transform: capitalize;
margin: 1em;
}
.open-popup:hover {
border-width: 2px;
}
这里描述了主区域和打开弹窗的链接按钮的样式。设置了渐变背景色、按钮的颜色、字体大小、字体样式、宽度、高度、边框等样式属性，使用 Flex 布局，使得包裹在内部的子元素能够进行灵活的排列。
在.open-popup中，box-sizing: border-box;使得元素的边框和内边距包含在宽度之内。text-align: center;使得按钮中的文本内容水平居中对齐。line-height: 4em;设定了行高。text-decoration: none;去除了链接的下划线。text-transform: capitalize;使得英文字母单词的首字母大写。.open-popup:hover定义了鼠标悬停在按钮上的样式，这里设置了边框的宽度在悬停时增加至 2px。
总的来说，这些 CSS 定义了主区块的背景样式以及弹出窗口链接按钮的样式，使得按钮在悬停时具有变化的边框宽度，且主区域能够使内部的元素水平和垂直居中。
/* popup page layout */
.popup {
position: absolute;
top: 0;
width: 100%;
height: inherit;
flex-direction: column;
justify-content: flex-start;
display: none;
}
.popup:target {
display: flex;
}
.popup .back {
font-size: 20px;
font-family: sans-serif;
text-align: center;
height: 2em;
line-height: 2em;
background-color: #ddd;
color: black;
text-decoration: none;
}
.popup .back:visited {
color: black;
}
.popup .back:hover {
background-color: #eee;
}
.popup p {
font-size: 100px;
text-align: center;
margin: 0.1em 0.05em;
}
这里描述了弹窗部分的布局与样式。在.popup中，position: absolute;将弹窗设置为绝对定位，相对于最近的已定位父元素进行定位。top: 0;将弹窗置于父元素的顶部。flex-direction: column; justify-content: flex-start;使用 Flex 布局，使得弹窗内的元素以垂直方向排列并且从顶部开始排列。display: none;表示在初始状态下将弹窗设为不可见。
.popup:target这个选择器用于在 URL 带有对应 ID 锚点时，将对应的弹窗设置为可见（display: flex）。
.popup .back设定了返回链接的字体大小、字体类型以及文本居中等样式，也设置了其背景颜色、文本颜色和访问时的颜色。
.popup p设置了段落元素的字体大小、文本居中，并添加了一些微小的外边距。
这些 CSS 给弹窗部分添加了基本的布局样式，通过使用了伪类target来控制弹窗的显示和隐藏，并设置了返回链接和段落元素的基本样式。
/* animation effects */
.popup > * {
filter: opacity(0);
animation: fade-in 0.5s ease-in forwards;
animation-delay: 1s;
}
@keyframes fade-in {
to {
filter: opacity(1);
}
}
.popup::before {
content: "";
position: absolute;
width: 100%;
height: 0;
top: 50%;
background-color: white;
animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
animation-delay: 0.5s;
}
@keyframes open-animate {
to {
height: 100vh;
top: 0;
}
}
.popup::after {
content: "";
position: absolute;
width: 0;
height: 2px;
background-color: white;
top: calc((100% - 2px) / 2);
left: 0;
animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
}
@keyframes line-animate {
50%,
100% {
width: 100%;
}
}
这里描述了弹窗（Popup）元素的动画效果。在.popup > *中，filter: opacity(0);将所有子元素的不透明度设置为 0，元素将初始处于不可见状态。
animation: fade-in 0.5s ease-in forwards;使用了名称为 fade-in 的动画，持续时间为0.5秒，采用了 ease-in 时间变化，并且最终状态保持不变。animation-delay: 1s;表示动画延迟1秒后开始播放。
在动画@keyframes fade-in中，to将元素的不透明度逐渐增加到1，以显示元素。
.popup::before表示使用伪元素 ::before 创造了一个白色的遮罩层，该伪元素的初始高度为0，将在动画中展开到全屏幕高度。采用名为 open-animate 的动画，用于延时0.5秒后播放，动画效果由 Cubic-bezier 函数生成。
.popup::after表示使用伪元素 ::after 创造了一条横线，初始宽度为0，高度为2px，定义了 line-animate 动画，使得该横线逐渐展开成一条横幅。
综上所述，这些 CSS 定义了弹窗元素的动画效果，包括子元素逐渐显现、遮罩层的展开以及横线的逐渐展开，组合起来形成了一个整体的弹窗效果
总结
以上就是整个效果的实现过程了，代码简单易懂，效果也比较炫酷多样。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
