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

卡片式设计在功能和美学方面都比其他设计好。为了适应不同屏幕尺寸的需要，卡片式设计可以协助用户非常容易地关注特定的内容，同时也可以让设计师在整个设计中合理、清晰地摆放内容。杂乱无章的网站是一种痛苦。当我们在页面上组织各种类型的元素时，卡片设计可以为这些内容的布局提供一个很好的秩序。这对设计师和用户都有好处。卡片设计的用途非常广泛，几乎可以用于任何部门的任何目的。

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

需要遵循的步骤

首先，使用HTML创建一个简单的卡片结构。
使用CSS对卡片的基本结构进行样式设计。
为了创造堆叠效果，我们将使用: before 和: after 伪类以及 CSS position 属性。
为了使卡片远离上面的卡片，使用CSS变换属性。
为了产生悬停的效果，我们将对卡片使用变换属性。

例子

在给定的例子中，当用户在一个卡片上悬停时，最上面的卡片将在X轴和Y轴上平移，这里是（10px-X轴，10px-Y轴）右下角方向，而最下面的堆叠卡片将向（-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的盒影属性、动画和过渡属性。

创建一个容器并在其中添加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>