用 HTML 和 CSS 制作复仇者联盟 ID 卡

Desknumber

在本教程中，我们将为复仇者联盟制作一张科幻身份证。在构建这个有趣的项目时，您将学习 Flexbox、嵌套 Flexbox、CSS 动画和大量其他 CSS 技术。

假设托尼·斯塔克想要重新设计复仇者联盟的 ID 卡，他需要我们帮助用 HTML 和 CSS 创建它们。那么，我们能提供什么帮助呢？在本教程中，我们将使用 Flexbox 创建所需的布局，同时深入研究一些高级布 电子邮件营销列表 局的嵌套 Flexbox。我们还将使用圆形和透明边框在 CSS 中创建科幻弧线，然后通过在复仇者图片周围使用 CSS 动画来为它们设置动画。最后但并非最不重要的一点是，我们将使用box-shadow和text-shadow属性为我们的 ID 卡添加最终的科幻风格。



在本教程结束时，我们将构建一个科幻动画复仇者联盟 ID 卡，并学习 Flexbox、嵌套 Flexbox、CSS 动画、边框、阴影和许多其他常用 CSS 属性的基础知识。如果你仔细观察，你会发现我们使用的100%是宽度，而100vh不是高度。该vh单位代表“视口高度”。它是一个视口单位，其他一些视口单位是：vw、vmin和vmax。

那么，为什么我们要使用高度100vh而不是100%高度呢？那么，%基础维度是相对于其父元素的。因此，如果我们将 the 的高度设置id-card-wrapper为 100%，则意味着id-card-wrappercover 的高度将为其父元素（即该body元素）高度的 100%。问题是 - 默认情况下 - body 元素不会覆盖整个屏幕的高度。body 元素的宽度默认为 100%，这就是我们可以使用width: 100%on的原因id-card-wrapper，但由于默认高度不是 100%，因此同样不适用于 height。由于视口单位是相对于视口的，而不是相对于父元素的，因此将高度设置为100vh将使元素覆盖可见区域（视口）的整个高度，而不管父元素的尺寸如何。