一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。
如何编写标记
看看你的页面在动画结束时应该是什么样子：
登陆页面的结构大纲
我们将蓝色部分称为导航栏，将黄色部分称为标题，将图像称为预加载器。
您的下一步是按照它们在页面上出现的顺序构建每个部分。
如何构建导航栏
您将需要导航栏中的图像，因此请转到此链接并下载它。把它存进去build/assets，同名logo.jpg。
您的导航栏将分为三个部分：
- 左边的标志
- 一个
div在中间 - 右侧的按钮
打开build/index.html，并将以下代码添加到 body 标记的顶部：
<nav>
<img src="assets/logo.jpg" alt="logo">
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Shop</a>
<a href="#">Contact</a>
<a href="#">Testimonials</a>
</div>
<button class="cta">Let's work together</button>
</nav>
复制代码接下来，您将使用一些 CSS 为导航栏添加间距和对齐方式。
打开src/input.css，并在该部分的末尾添加以下@layer base内容：
nav {
@apply flex p-4 md:py-8 md:px-4 lg:p-12;
@apply justify-center items-center gap-4;
}
复制代码然后将其添加到文件的末尾，外部 @layer base：
@layer components {
nav > img {
width: 120px;
}
nav a {
@apply underline;
}
.cta {
@apply rounded bg-black text-white py-2 px-4;
}
nav .cta {
@apply hidden md:inline-block;
}
.nav-links {
@apply hidden md:flex gap-4 lg:gap-8 lg:mx-16 xl:mx-20;
}
}
复制代码完成后，您的页面应如下所示：
导航栏截图
现在您已经构建了导航栏，现在将其隐藏，以便您稍后可以将其设置为可见性。
回到，并在index.html中添加一个类：opacity-0``nav
<body>
<nav class="opacity-0">
<!-- leave the rest of the code as it is -->
</nav>
</body>
复制代码如何构建标题
您将通过构建三行来实现标题。
第一行由一些粗体、放大的文本和一段普通文本组成，当屏幕小于 768 像素（在移动设备上）时，您将隐藏这些文本。
第二行与第一行类似：一些粗体、放大的文本，向右移动，以及一个旋转的 SVG 代替段落。SVG 也将隐藏在移动设备上。
第三行仅在移动设备上可见，并包含一段文本和一个按钮。
将以下代码放入build/index.htmlnav 标签之后：
<header>
<div class="row first-row">
<p class="bold-text">
The Possibilities
</p>
<p class="copy">
<span>
We believe that workspaces
</span>
<span>
should be friendly and convenient.
</span>
<span>
Here is an invitation into our how
</span>
<span>
we design workspaces at curved.
</span>
</p>
</div>
<div class="row second-row">
<p class="bold-text">
Of Workspaces
</p>
<p class="round-text" >
<svg xmlns="http://www.w3.org/2000/svg" width="106" height="106" viewBox="0 0 106 106" fill="none">
<path d="M0,53a53,53 0 1,0 106,0a53,53 0 1,0 -106,0" id="curve"></path>
<text width="314.1593">
<textPath alignment-baseline="top" xlink:href="#curve">
office workspace . office workspace . office workspace .
</textPath>
</text>
<defs>
</defs>
</svg>
</p>
</div>
<div class="row mobile-row">
<p class="copy">
<span>
We believe that workspaces
</span>
<span>
should be friendly and convenient.
</span>
<span>
Here is an invitation into our how
</span>
<span>
we design workspaces at curved.
</span>
</p>
<button class="cta">Let's work together</button>
</div>
</header>
复制代码现在结构已经到位，是时候制作视觉效果了。 您将定义一个名为 的自定义实用程序类animate-spin-slow，它将缓慢旋转的动画应用于它所使用的元素。
将 的内容替换为tailwind.config.js以下内容：
module.exports = {
content: [
"./build/**/*.{html,js}"
],
theme: {
extend: {
animation: {
'spin-slow': 'spin 10s linear infinite',
}
},
},
plugins: [],
}
复制代码接下来，您将为标题本身编写样式。
将以下代码放入src/input.css，里面@layer components：
.row {
@apply flex p-4 justify-center md:justify-start;
@apply items-center gap-4 md:gap-8;
@apply lg:gap-12 text-center md:text-left;
}
.first-row {
@apply md:pt-8 lg:pt-16;
}
.bold-text {
@apply font-bold text-5xl lg:text-6xl xl:text-8xl;
}
.copy {
@apply font-medium;
}
.second-row .bold-text {
@apply lg:pl-16 xl:pl-36
}
.first-row .copy {
@apply hidden md:flex md:flex-col;
}
.round-text {
@apply hidden md:block pl-20 lg:pl-40;
}
.round-text svg{
@apply animate-spin-slow;
}
.round-text textPath {
@apply text-xs fill-black;
}
.mobile-row {
@apply flex md:hidden flex-col py-4;
}
复制代码此时，您的页面应如下所示：
标题截图
您的导航栏应该出现在页面上，但不可见，这是顶部空白的原因。
现在，通过给它们一个类来隐藏每行中的所有块opacity-0。编辑index.html看起来像这样：
<header>
<div class="row first-row">
<p class="bold-text opacity-0">
<!-- leave as is -->
</p>
<p class="copy opacity-0">
<!-- leave as is -->
</p>
</div>
<div class="row second-row">
<p class="bold-text opacity-0">
<!-- leave as is -->
</p>
<p class="round-text opacity-0" >
<!-- leave as is -->
</p>
</div>
<div class="row mobile-row">
<p class="copy opacity-0">
<!-- leave as is -->
</p>
<button class="cta opacity-0"><!-- leave as is --></button>
</div>
</header>
复制代码你已经完成了标题！