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

与其他设计相比，卡片式设计在功能和美观性方面更优。为了适应不同的屏幕尺寸，卡片式设计可以帮助用户轻松集中注意力在特定内容上，同时也使设计者能够合理清楚地展示内容。杂乱的网站是一种痛苦。当我们在页面上组织各种类型的元素时，卡片式设计可以为这些内容的布局提供良好的秩序。这对设计师和用户都是有利的。卡片式设计非常灵活，可以在任何行业的任何目的中使用。

在本文中，我们将使用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>