手把手教你实现一个中间开屏前言

#效果预览

效果如下所示。

#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">&lt; back</a>
      <p>🦓🦒🐅🐆🐘🦏🐃🦌🐐🐫</p>
    </section>
    <section id="aquatic" class="popup">
      <a href="#" class="back">&lt; 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 {
      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来控制弹窗的显示和隐藏，并设置了返回链接和段落元素的基本样式。

复制    
    .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 定义了弹窗元素的动画效果，包括子元素逐渐显现、遮罩层的展开以及横线的逐渐展开，组合起来形成了一个整体的弹窗效果