HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何使用 CSS 创建响应式堆叠卡片悬停效果?

cssweb developmentfront end technology更新于 2025/1/26 3:24:17

卡片式 设计在功能性和美观性方面优于其他设计。为了适应不同的屏幕尺寸，卡片式设计可以帮助用户轻松专注于特定内容，并使设计师能够在整个设计过程中合理、清晰地呈现内容。杂乱无章的网站令人头疼。当我们在页面上组织各种类型的元素时，卡片式设计可以为这些内容的布局提供良好的秩序。这对设计师和用户都有利。卡片式设计用途广泛，几乎可以用于任何行业的任何用途。

在本文中，我们将使用 HTML 和 CSS 构建一个响应式堆叠卡片悬停效果。

步骤说明

  • 首先，使用 HTML 创建一个简单的卡片结构。

  • 使用 CSS 设置卡片的基本结构样式。

  • 为了创建堆叠效果，我们将使用 before 和 after 伪类以及 CSS 的position属性。

  • 为了使卡片远离上层卡片，请使用 CSS 的 transform 属性。

  • 为了实现悬停效果，我们将对卡片使用 transform 属性。

示例

在给定的示例中，当用户将鼠标悬停在卡片上时，最上面的卡片将在 X 轴和 Y 轴上平移，如下所示(X 轴 10px，Y 轴 10px)向右下方向平移，最底部堆叠的卡片将同时沿(-X)轴和(-Y)轴平移，从而产生多个向右下方向堆叠的效果。这是使用 :before 和 :after 伪元素实现的。

<!DOCTYPE html>
<html>
<head>
   <title> Stacked Cards hover effect </title>
   <style>
      body {
         font-family: sans-serif;
         color: #5c5957;
         background: #e2d9d5;;
         margin-top: 70px;
      }
      h1{
         text-align: center;
      }
      .card {
         position: relative;
         cursor: pointer;
         max
         -width: 380px;
         margin: 70px auto;
      }
      .card::before,
      .card::after {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
      .card::before,
      .card::after,
      .card .card
      -inner {
         background
         -color: white;
         border: 2px solid #e2d9d5;
         border
         -radius: 7px;
         transition: transform 0.5s;
      }
      .card::before,
      .card
      -inner {
         z
         -index: 1;
      }
      .card
      -inner {
         position: relative;
         padding: 60px;
      }
      .card-top::before {
         transform: translate(
            calc(-1 * 8px),
            calc(-1 * 8px)
         );
      }
      .card-top::after {
         transform: translate(
            calc(-1 * 16px),
            calc(-1 * 16px)
         );
      }
      .card-top:hover::before,
      .card-top:hover::after,
      .card-top:hover .card-inner {
         transform: translate(calc(-1 * 8px), 0);
      }
   </style>
</head>
<body>
   <h1> Stacked Cards Hover Effects </h1>
   <div id= "card-wrap">
      <div class= "card card-top">
         <div class= "card-inner">
            <h3 id= "card-heading"> Stacked cards </h3>
            <div id= "card-body"> This is an example. </div>
         </div>
      </div>
   </div>
</body>
</html>

示例

这里，我们使用了 CSS 的 box-shadow 属性、动画和过渡属性。

  • 创建一个容器，并向其中添加 4 个 div 元素。这 4 个元素将作为卡片。

  • 在每个卡片中创建一个条形。为条形添加线性渐变。

  • 使用 CSS 设置卡片样式。根据卡片的位置调整它们的位置，以便堆叠。

  • 鼠标悬停时，根据创建过渡效果的位置调整卡片的位置。

<!DOCTYPE html>
<html>
<head>
   <title> Stacked cards </title>
   <style>
      body {
         background-color: rgba(16, 14, 23, 1);
         font-family: 'Times New Roman', sans-serif;
      }
      #box {
         display: flex;
         position: absolute;
         top: 58px;
         left: calc(50% - 300px);
         padding: 5px;
         height: 280px;
         width: 590px;
      }
      #card {
         display: flex;
         position: relative;
         left: 0px;
         height: 290px;
         width: 210px;
         border-radius: 15px;
         box-shadow: -3px 0 6px black;
         background-color: rgba(23, 20, 29, 1);
         transition: 0.6s ease-out;
      }
      #card:not(:first-child) {
         margin-left: -40px;
      }
      #card:hover {
         transform: translateY(-25px);
         transition: 0.7s ease-out;
      }
      #card:hover ~ #card {
         position: relative;
         left: 48px;
         transition: 0.7s ease-out;
      }
      .heading {
         position: absolute;
         left: 21px;
         top: 16px;
         color: white;
         font-family: Georgia;
         font-weight: 300;
         letter-spacing: 1px;
      }
      h3{
         text-align: center;
         position: relative;
         top: 80%;
         color: white;
      }
      #bar {
         position: absolute;
         top: 90px;
         left: 16px;
         height: 6px;
         width: 140px;
      }
      .emptybar {
         background-color: rgba(46, 49, 51, 1);
         width: 100%;
         height: 100%;
      }
      .filledbar {
         position: absolute;
         top: 0px;
         z-index: 2;
         width: 0px;
         height: 100%;
         background: rgb(10,158,237);
         background: linear-gradient(90deg, #009bd9 0%, #d99345 60%, #ffda00 100%);
         transition: 0.7s ease-out;
      }
      #card:hover .filledbar {
         width: 130px;
         transition: 0.7s ease-out;
      }
   </style>
</head>
<body>
   <div id= "box">
      <div id= "card">
         <h3 class= "heading"> Card 1 </h3>
         <div id= "bar">
            <div class= "emptybar"> </div>
            <div class= "filledbar"> </div>
            <h3> Hello World </h3>
         </div>
      </div>
      <div id= "card">
         <h3 class= "heading"> Card 2 </h3>
         <div id= "bar">
            <div class= "emptybar"> </div>
            <div class= "filledbar"> </div>
            <h3> Hello World </h3>
         </div>
      </div>
      <div id= "card">
         <h3 class= "heading"> Card 3 </h3>
         <div id= "bar">
            <div class= "emptybar"> </div>
            <div class= "filledbar"> </div>
            <h3> Hello World </h3>
         </div>
      </div>
   </div>
</body>
</html>

卡片式元素在网页设计中的重要性

  • 卡片设计简洁美观，信息量较少。由于移动端的适应性是关键因素，卡片响应迅速，魅力十足。

  • 由于空间限制，卡片比长篇文字更易于阅读，读者可以通过点击操作按钮阅读更多内容。

  • 卡片可以在各种社交网络和平台上以内容爆炸的形式分享。

  • 卡片不能根据特定的审美风格进行分类，因为它们可以与所有事物和各种设计相得益彰。

  • 在杂志中，卡片可以设置成层级结构，甚至可以完全滚动。它们需要非凡的开发技能，以及丰富的交互和可用性。

总结

卡片可以是任意大小、颜色或形状。但它们都包含图片、图标和一些基本的文本信息，例如标题、用户名和位置。毫无疑问，卡片式设计无论在PC还是手机上都是理想之选。卡片设计已成为网页设计中的一种流行趋势，从在线购物商城到社交媒体网站，无不如此。使用CSS，您可以为您的网站设计各种创意卡片。

在现实世界中，许多社交媒体平台正在转向卡片式设计。为了在推文中加入多媒体内容，Twitter推出了卡片式设计。内容越来越多地以卡片形式呈现。谷歌正在通过Google Now探索一种新的信息传递方式，从搜索转向移动设备的使用。

卡片对Pinterest至关重要，而Spotify的"发现"功能也使用卡片。为了传递信息，Facebook现在也使用卡片和信息片段。

相关文章

有用资源

打印 下一节:如何编写快速加载的 HTML 页面? ❯❮ 上一节:如何使用 CSS 消除链接图片周围的蓝色边框?