效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/GYXvez

可交互视频

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cNzVnAL

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，一个名为 .main 的容器中包含 1 个链接：

<div class="main"><a href="#" class="open-popup">open popup</a>
</div>

设置页面的基本属性：无边距、全高、忽略溢出：

body {margin: 0;height: 100vh;overflow: hidden;
}

设置主界面的背景和其中按钮的布局方式：

.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;
}

设置按钮悬停效果：

.open-popup:hover {border-width: 2px;
}

至此，主界面完成，接下来制作弹窗。
在 dom 中增加的 .popup 小节表示弹窗内容，其中的 <a> 是返回按钮，<p> 是具体内容，这里我们把内容简化为一些陆生动物的 unicode 字符，为了能够触发这个弹窗，设置 .popup 的 id 为 terrestrial，并在 .main 的 <a> 链接中指向它：

<div class="main"><a href="#terrestrial" class="open-popup">terrestrial animals</a>
</div>
<section id="terrestrial" class="popup"><a href="#" class="back">&lt; back</a><p>??????????</p>
</section>

设置弹窗的尺寸，它将覆盖刚才的 .main 的内容：

.popup {position: absolute;top: 0;width: 100%;height: inherit;display: flex;flex-direction: column;justify-content: start;
}

设置返回按钮的样式：

.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 {display: none;
}.popup:target {display: flex;
}

至此，弹窗完成，但弹窗中的内容是重叠在主界面上面的，接下来制作从主界面到弹窗的动画效果。
动画效果包含 3 个步骤：页面中间的一条直线从左端横穿到右端，页面中间大幕向上下两端拉开，最后内容淡入，下面的制作过程依次是第 3 个步骤、第 2 个步骤、第 1 个步骤。
先让弹窗内容淡入：

.popup > * {filter: opacity(0);animation: fade 0.5s ease-in forwards;
}@keyframes fade{to {filter: opacity(1);}
}

用伪元素 ::before 制作一个白色背景，从页面中间向上下两端展开：

.popup::before {content: '';position: absolute;box-sizing: border-box;width: 100%;height: 0;top: 50%;background-color: white;animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
}@keyframes open-animate {to {height: 100vh;top: 0;}
}

设置弹窗淡入动画的延时时长，形成先大幕拉开再显示内容的效果：

.popup > * {animation-delay: 0.5s;
}

用伪元素 ::after 制作一条横线，从页面左端横穿到右端：

.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 > * {animation-delay: 1s;
}.popup::before {animation-delay: 0.5s;
}

至此，整个动画效果完成。
在 dom 再中增加一组水生动物的内容，以及打开它的链接：

<div class="main"><a href="#terrestrial" class="open-popup">terrestrial animals</a><a href="#aquatic" class="open-popup">aquatic animals</a>
</div>
<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>

最后，设置一下主界面上按钮的间距：

.open-popup {margin: 1em;
}

大功告成！