效果预览
效果如下所示。
HTML部分
首先看到HTML部分，相关代码如下。
1 <nav class="main">
2 <a href="#terrestrial" class="open-popup">terrestrial animals</a>
3 <a href="#aquatic" class="open-popup">aquatic animals</a>
4 </nav>
5 <section id="terrestrial" class="popup">
6 <a href="#" class="back">< back</a>
7 <p>🦓🦒🐅🐆🐘🦏🐃🦌🐐🐫</p>
8 </section>
9 <section id="aquatic" class="popup">
10 <a href="#" class="back">< back</a>
11 <p>🐋🐳🐬🐟🐠🐡🐙🦑🦐🦀</p>
12 </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部分。相关代码如下。
1 .main {
2 height: inherit;
3 background: linear-gradient(dodgerblue, darkblue);
4 display: flex;
5 align-items: center;
6 justify-content: center;
7 }
8 .open-popup {
9 box-sizing: border-box;
10 color: white;
11 font-size: 16px;
12 font-family: sans-serif;
13 width: 10em;
14 height: 4em;
15 border: 1px solid;
16 text-align: center;
17 line-height: 4em;
18 text-decoration: none;
19 text-transform: capitalize;
20 margin: 1em;
21 }
22 .open-popup:hover {
23 border-width: 2px;
24 }
这里描述了主区域和打开弹窗的链接按钮的样式。设置了渐变背景色、按钮的颜色、字体大小、字体样式、宽度、高度、边框等样式属性，使用 Flex 布局，使得包裹在内部的子元素能够进行灵活的排列。
在.open-popup中，box-sizing: border-box;使得元素的边框和内边距包含在宽度之内。text-align: center;使得按钮中的文本内容水平居中对齐。line-height: 4em;设定了行高。text-decoration: none;去除了链接的下划线。text-transform: capitalize;使得英文字母单词的首字母大写。.open-popup:hover定义了鼠标悬停在按钮上的样式，这里设置了边框的宽度在悬停时增加至 2px。
总的来说，这些 CSS 定义了主区块的背景样式以及弹出窗口链接按钮的样式，使得按钮在悬停时具有变化的边框宽度，且主区域能够使内部的元素水平和垂直居中。
1
2 .popup {
3 position: absolute;
4 top: 0;
5 width: 100%;
6 height: inherit;
7 flex-direction: column;
8 justify-content: flex-start;
9 display: none;
10 }
11 .popup:target {
12 display: flex;
13 }
14 .popup .back {
15 font-size: 20px;
16 font-family: sans-serif;
17 text-align: center;
18 height: 2em;
19 line-height: 2em;
20 background-color: #ddd;
21 color: black;
22 text-decoration: none;
23 }
24 .popup .back:visited {
25 color: black;
26 }
27 .popup .back:hover {
28 background-color: #eee;
29 }
30 .popup p {
31 font-size: 100px;
32 text-align: center;
33 margin: 0.1em 0.05em;
34 }
这里描述了弹窗部分的布局与样式。在.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来控制弹窗的显示和隐藏，并设置了返回链接和段落元素的基本样式。
1
2 .popup > * {
3 filter: opacity(0);
4 animation: fade-in 0.5s ease-in forwards;
5 animation-delay: 1s;
6 }
7 @keyframes fade-in {
8 to {
9 filter: opacity(1);
10 }
11 }
12 .popup::before {
13 content: "";
14 position: absolute;
15 width: 100%;
16 height: 0;
17 top: 50%;
18 background-color: white;
19 animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
20 animation-delay: 0.5s;
21 }
22 @keyframes open-animate {
23 to {
24 height: 100vh;
25 top: 0;
26 }
27 }
28 .popup::after {
29 content: "";
30 position: absolute;
31 width: 0;
32 height: 2px;
33 background-color: white;
34 top: calc((100% - 2px) / 2);
35 left: 0;
36 animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
37 }
38 @keyframes line-animate {
39 50%,
40 100% {
41 width: 100%;
42 }
43 }
这里描述了弹窗（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 定义了弹窗元素的动画效果，包括子元素逐渐显现、遮罩层的展开以及横线的逐渐展开，组合起来形成了一个整体的弹窗效果