一起养成写作习惯!这是我参与「掘金日新计划 · 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.html
nav 标签之后:
<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>
复制代码
你已经完成了标题!