效果预览

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

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

大功告成！