前言
这次给大家带来一个开屏的效果,由纯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">< back</a>
<p>🦓🦒🐅🐆🐘🦏🐃🦌🐐🐫</p>
</section>
<section id="aquatic" class="popup">
<a href="#" class="back">< 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">
这两个部分分别代表了两个弹出的窗口内容。每一个窗口内容块中包含了一个返回的链接(< 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 定义了弹窗元素的动画效果,包括子元素逐渐显现、遮罩层的展开以及横线的逐渐展开,组合起来形成了一个整体的弹窗效果
总结
以上就是整个效果的实现过程了,代码简单易懂,效果也比较炫酷多样。另外,感兴趣的小伙伴们还可以在现有基础上发散思维,比如增加点其他效果,或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享,互相学习。最后,完整代码在码上掘金里可以查看,如果有什么问题大家在评论区里讨论~