效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/GYXvez互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cNzVnAL源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，一个名为.main的容器包含1个链接：
为具体内容。这里我们将内容简化为一些陆生动物的unicode字符。为了能够触发这个弹出窗口，将.popup的id设置为terrestrial并在.main中的链接中指向它：
???????????
设置弹窗的大小，会覆盖刚才.main的内容：.popup{position:absolute;顶部：0；宽度：100%；身高：继承；显示：弹性；弹性方向：列；justify-content:start;}设置后退按钮的样式：.popup.back{font-size:20px;字体系列：无衬线；文本对齐：居中；高度：2em；行高：2em；背景色：#ddd；颜色：黑色;text-decoration:none;}.popup.back:visited{color:black;}.popup.back:hover{background-color:#eee;}SetcontentStyle:.popupp{font-size:100px;文本对齐：居中；margin:0.1em0.05em;}设置弹窗内容默认不显示。只有点击主界面的链接才会显示：.popup{display:none;}.popup:target{display:flex;}至此，弹窗完成，但是弹窗中的内容-向上窗口叠加在主界面上。接下来，创建一个从主界面到弹窗的动画效果。动画效果包括3个步骤：页面中间一条直线从左端穿过到右端，页面中间一条大线上下拉动窗帘，最后内容淡入。下面的制作过程是第三步、第二步、第一步。让弹窗的内容先淡入：.popup>*{filter:opacity(0);动画：淡入淡出0.5s向前缓入；}@keyframes淡入淡出{到{filter:opacity(1);}}使用伪元素::before做一个白色背景，从页面中间上下铺开：.popup::before{content:'';位置：绝对；框大小：边框框；宽度：100%；高度：0；顶部：50%；背景色：白色；动画：open-animate0.5scubic-bezier(0.8,0.2,0,1.2)forwards;}@keyframesopen-animate{to{height:100vh;顶部：0；}}设置popup窗口淡入动画的延迟时间，形成先开幕后显示内容的效果：.popup>*{animation-delay:0.5s;}使用伪元素::after从页面的左端到右端制作一条水平线：.popup::after{content:'';位置：绝对；宽度：0；高度：2px；背景色：白色；顶部：计算（（100%-2px）/2）；左：0；动画：line-animate0.5scubic-bezier(0.8,0.2,0,1.2);}@keyframesline-animate{50%,100%{width:100%;}}然后设置弹窗淡入动画和窗帘开启动画的延迟时间，这样动画效果是顺序执行的：.popup>*{animation-delay:1s;}.popup::之前e{animation-delay:0.5s;}至此，整个动画效果完成，在dom中添加一组水生动物内容，打开链接：??????????
??????????
最后，设置主界面按钮的间距：.open-popup{margin:1em;}就大功告成了！