手把手教你实现一个中间开屏

4,435 阅读5分钟

前言

这次给大家带来一个开屏的效果,由纯CSS实现,实现起来并不复杂,效果也并不简单,话不多说,咱们直入主题。

效果预览

效果如下所示。

HTML部分

首先看到HTML部分,相关代码如下。

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

这里包含了一个导航条和两个弹出窗口。<nav class="main">是主导航条的部分。包含了两个链接,分别链接到页面中的不同部分。<a href="#terrestrial" class="open-popup">terrestrial animals</a><a href="#aquatic" class="open-popup">aquatic animals</a>这两个链接标签(<a>)作为导航链接,包含了类名open-popup,当这些链接被点击时会弹出相关的窗口。<section id="terrestrial" class="popup"><section id="aquatic" class="popup">这两个部分分别代表了两个弹出的窗口内容。每一个窗口内容块中包含了一个返回的链接(&lt; back)和相应类别的动物表情。

综上所述,这里构建了一个包含导航条和两个弹出窗口的结构,点击不同的链接可以弹出对应的内容窗口,用于显示相关的动物表情。

CSS部分

接着看到CSS部分。相关代码如下。

    .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;
      margin: 1em;
    }
    .open-popup:hover {
      border-width: 2px;
    }

这里描述了主区域和打开弹窗的链接按钮的样式。设置了渐变背景色、按钮的颜色、字体大小、字体样式、宽度、高度、边框等样式属性,使用 Flex 布局,使得包裹在内部的子元素能够进行灵活的排列。

.open-popup中,box-sizing: border-box;使得元素的边框和内边距包含在宽度之内。text-align: center;使得按钮中的文本内容水平居中对齐。line-height: 4em;设定了行高。text-decoration: none;去除了链接的下划线。text-transform: capitalize;使得英文字母单词的首字母大写。.open-popup:hover定义了鼠标悬停在按钮上的样式,这里设置了边框的宽度在悬停时增加至 2px

总的来说,这些 CSS 定义了主区块的背景样式以及弹出窗口链接按钮的样式,使得按钮在悬停时具有变化的边框宽度,且主区域能够使内部的元素水平和垂直居中。

    /* popup page layout */
    .popup {
      position: absolute;
      top: 0;
      width: 100%;
      height: inherit;
      flex-direction: column;
      justify-content: flex-start;
      display: none;
    }
    .popup:target {
      display: flex;
    }
    .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中,position: absolute;将弹窗设置为绝对定位,相对于最近的已定位父元素进行定位。top: 0;将弹窗置于父元素的顶部。flex-direction: column; justify-content: flex-start;使用 Flex 布局,使得弹窗内的元素以垂直方向排列并且从顶部开始排列。display: none;表示在初始状态下将弹窗设为不可见。

.popup:target这个选择器用于在 URL 带有对应 ID 锚点时,将对应的弹窗设置为可见(display: flex)。

.popup .back设定了返回链接的字体大小、字体类型以及文本居中等样式,也设置了其背景颜色、文本颜色和访问时的颜色。

.popup p设置了段落元素的字体大小、文本居中,并添加了一些微小的外边距。

这些 CSS 给弹窗部分添加了基本的布局样式,通过使用了伪类target来控制弹窗的显示和隐藏,并设置了返回链接和段落元素的基本样式。

    /* animation effects */
    .popup > * {
      filter: opacity(0);
      animation: fade-in 0.5s ease-in forwards;
      animation-delay: 1s;
    }
    @keyframes fade-in {
      to {
        filter: opacity(1);
      }
    }
    .popup::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0;
      top: 50%;
      background-color: white;
      animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
      animation-delay: 0.5s;
    }
    @keyframes open-animate {
      to {
        height: 100vh;
        top: 0;
      }
    }
    .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)元素的动画效果。在.popup > *中,filter: opacity(0);将所有子元素的不透明度设置为 0,元素将初始处于不可见状态。 animation: fade-in 0.5s ease-in forwards;使用了名称为 fade-in 的动画,持续时间为0.5秒,采用了 ease-in 时间变化,并且最终状态保持不变。animation-delay: 1s;表示动画延迟1秒后开始播放。

在动画@keyframes fade-in中,to将元素的不透明度逐渐增加到1,以显示元素。

.popup::before表示使用伪元素 ::before 创造了一个白色的遮罩层,该伪元素的初始高度为0,将在动画中展开到全屏幕高度。采用名为 open-animate 的动画,用于延时0.5秒后播放,动画效果由 Cubic-bezier 函数生成。

.popup::after表示使用伪元素 ::after 创造了一条横线,初始宽度为0,高度为2px,定义了 line-animate 动画,使得该横线逐渐展开成一条横幅。

综上所述,这些 CSS 定义了弹窗元素的动画效果,包括子元素逐渐显现、遮罩层的展开以及横线的逐渐展开,组合起来形成了一个整体的弹窗效果

总结

以上就是整个效果的实现过程了,代码简单易懂,效果也比较炫酷多样。另外,感兴趣的小伙伴们还可以在现有基础上发散思维,比如增加点其他效果,或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享,互相学习。最后,完整代码在码上掘金里可以查看,如果有什么问题大家在评论区里讨论~