如何用纯 CSS 创作一个打开内容弹窗的交互动画

效果预览

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

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">< 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">< back</a>
    <p></p>
</section>
<section id="aquatic" class="popup">
    <a href="#" class="back">< back</a>
    <p></p>
</section>

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

.open-popup {
    margin: 1em;
}

大功告成！