css 加载动画
在上一个教程中,我们使用flexbox创建了一个全屏响应页面。 今天,我们将通过添加一些CSS动画来使此页面更具吸引力。
这是我们要构建的:
1. HTML
为了添加所需的动画,我们将略微更新初始页面标记。 在上一个教程中,我们main
元素的标记如下所示:
<main class="page-main">
<div>
<h1>...</h1>
<p>...</p>
<p>...</p>
</div>
</main>
出于本教程的目的,我们将添加一些额外的包装器,将其更改为:
<main class="page-main">
<div>
<div class="text-wrapper">
<h1>...</h1>
</div>
<div class="text-wrapper p-wrapper">
<p>...</p>
</div>
<div class="text-wrapper p-wrapper">
<p>...</p>
</div>
</div>
</main>
以下是修改后的整体页面标记:
<div class="wrapper">
<header class="page-header">
<nav>
<h2>...</h2>
<ul>...</ul>
<button class="cta-contact">...</button>
</nav>
</header>
<main class="page-main">
<div>
<div class="text-wrapper">
<h1>...</h1>
</div>
<div class="text-wrapper p-wrapper">
<p>...</p>
</div>
<div class="text-wrapper p-wrapper">
<p>...</p>
</div>
</div>
</main>
<footer class="page-footer">
<small>...</small>
<ul>...</ul>
</footer>
</div>
2.添加初始CSS样式
有了HTML,让我们将注意力集中在重要的东西上:CSS。
首先,我们将做四件事:
- 隐藏所有页面元素。
- 设置
header
和footer
元素及其子元素的样式。 - 为
header
的::after
伪元素定义样式。 - 在
main
为文本包装器及其子元素指定样式。
以下是相关的样式:
/* variables */
:root {
--main-purple-color: #9e89b8;
}
.page-header nav > *,
.page-main,
.page-footer > * {
opacity: 0;
}
.page-header,
.page-footer,
.page-main .text-wrapper {
overflow: hidden;
}
.page-header nav > * {
transform: translateY(-30px);
}
.page-footer > * {
transform: translateY(30px);
}
.page-header {
position: relative;
}
.page-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--main-purple-color);
z-index: 99999;
transform: scaleX(0);
}
.page-main .text-wrapper + .text-wrapper {
margin-top: 10px;
}
.page-main .text-wrapper * {
transform: translateY(120%);
}
.page-main .p-wrapper * {
transform: translateY(-120%);
}
3.触发CSS动画
在准备好HTML和基本CSS之后,我们现在就可以集中精力处理页面动画了。
但是,在执行此操作之前,请确保我们了解它们的运行时间:理想情况下,页面完全加载后立即运行。 这样可以确保所有页面资产都准备就绪,位于正确的位置,并且我们不会丢失任何动画效果。
考虑到这一点,我们首先等待页面加载,然后在发生这种情况时,我们使用JavaScript将loaded
类添加到body
。
以下是相关JavaScript代码:
window.addEventListener("load", () => {
document.querySelector("body").classList.add("loaded");
});
我们应用的所有动画都将对已loaded
类的后代进行。
因此,我们的第一个放大动画针对header
的::after
伪元素:
.loaded .page-header::after {
animation: scaleIn 1.3s ease-in 0.2s forwards;
}
@keyframes scaleIn {
100% {
transform: scaleX(1);
}
}
提示:默认情况下,元素的变换原点是其中心,这就是为什么伪元素的动画从其中心开始的原因。 如果希望动画从另一个位置开始,只需更改目标元素的transform-origin
属性值。
在下面,您可以看到在应用不同的transform-origin
动画如何变化:
接下来,我们使用淡入效果来显示页面元素。 除了此动画之外,我们还使用幻灯片动画来显示header
和footer
内容:
.loaded .page-main {
animation: fadeIn 1s ease-in 0.7s forwards;
}
.loaded .page-header nav > *,
.loaded .page-footer > * {
animation: fadeIn 1s ease-in 0.7s forwards, slideIn 0.8s ease-in 0.9s forwards;
}
@keyframes fadeIn {
60% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slideIn {
100% {
transform: translateY(0);
}
}
最后,通过滑入效果可以看到main
的元素:
.loaded .page-main .text-wrapper * {
animation: slideIn 0.6s cubic-bezier(0.54, 0.46, 0.54, 0.94) 2s forwards;
}
@keyframes slideIn {
100% {
transform: translateY(0);
}
}
现在,让我们再次看一下我们刚刚构建的内容:
结论
在本快速教程中,我们通过利用CSS动画设法为HTML flexbox页面设置了动画。
关闭前的一些注意事项:
css 加载动画