打造视觉吸引力十足的网页布局

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索 CSS 编程的基础知识,并学习如何创建视觉上吸引人的网页。通过一系列练习和挑战,你将获得使用 CSS 选择器、属性和值的实践经验,并熟练掌握 HTML 元素的样式设置。在实验结束时,你将具备创建美观且响应式网页布局的技能和知识。

等距卡片

虚拟机中已经提供了 index.htmlstyle.css

要创建一个等距卡片,可使用 transform 搭配 rotateX()rotateZ() 以及 box-shadow。你还可以添加一个 transition 来为卡片添加动画效果,并在用户悬停在卡片上时创建一种抬起的效果。

以下是一个示例代码片段:

<div class="isometric-card"></div>
.isometric-card {
  margin: 0 auto;
  transform: rotateX(51deg) rotateZ(43deg);
  transform-style: preserve-3d;
  background-color: #fcfcfc;
  will-change: transform;
  width: 240px;
  height: 320px;
  border-radius: 2rem;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    transform 0.4s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.isometric-card:hover {
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你!你已经完成了等距卡片实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程