前端每日實戰：160# 視頻演示如何用純 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">&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;
}

大功告成！