CSS实现一个交互感不错的卡片列表-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS实现一个交互感不错的卡片列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS实现一个交互感不错的卡片列表,css,交互,css3,卡片列表,小酷

CSS实现一个交互感不错的卡片列表,css,交互,css3,卡片列表,小酷文章来源地址https://www.toymoban.com/news/detail-676419.html

0、需求分析

横向滚动
鼠标悬停时突出显示
- 默认堆叠展示
- 鼠标悬停时，完整展示当前块+适当旋出效果
移动端样式优化、磁吸效果
美化滚动条

1、涉及的主要知识块

flex 布局
css 简单变换+过渡
- transform、transition
渐变色函数
- linear-gradient
- …
伪类、伪元素
- 滚动条、::after、 ::before
- …

2、实现效果

CSS实现一个交互感不错的卡片列表,css,交互,css3,卡片列表,小酷

3、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片</title>

  <style>
    :root{
      --pcWidth: 700px;
      --mbWidth: calc(100%-30px);
    }
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: #3a3939;
    }
    @media (min-width: 1200px) {
      .wrapper{
        width: calc(var(--pcWidth) + 30px);
      }
      .article-wrapper{
        width: var(--pcWidth);
      }
    }
    @media (max-width: 1200px){
      .wrapper{
        width: var(--mbWidth);
      }
      .article-wrapper{
        width: var(--mbWidth);
      }
    }
    .wrapper{
      height: fit-content;
      position: relative;
      margin: 0 auto;
    }
    .wrapper::after{
      content: " ";
      position: absolute;
      top: 50px;
      bottom: 28px;
      right: 0;
      width: 6px;
      background: linear-gradient(45deg, #df0684, #c90700 20%, #f2a500 90%);
      border-radius: 3px 2px 2px 3px;
      z-index: 2;
      box-shadow: -8px 0 12px 2px #000;
    }
    .article-wrapper{
      position: relative;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      display: flex;
      color: white;
      padding: 50px 0 20px 30px;
    }
    .article-wrapper::-webkit-scrollbar{
      width: 8px;
      height: 8px;
    }
    .article-wrapper::-webkit-scrollbar-thumb{
      height: 5px;
      background: linear-gradient(.8deg, #05CB98, #0098C9 40%, #F25A00 80%);
      border-radius: 10px;
    }
    .wrapper .item{
      min-width: 180px;
      background: linear-gradient(85deg, #4e4e4e, #222222);
      border-radius: 9px;
      box-shadow: -73px 0 66px -20px #000000;
      transition: .2s;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    .wrapper .item:not(:first-child){
      margin-left: -50px;
    }
    .wrapper .item:hover{
      transform: translateY(-8px) rotate(2deg);
    }
    .wrapper .item:hover~.item{
      transform: translateX(59px);
    }
    .wrapper .item .title{
      overflow-y: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin: 6px 8px;
    }
    .wrapper .item .cover{
      width: 100%;
      height: 150px;
      background: linear-gradient(134deg, #05CB98, #0098C9 40%, #F25A00 80%);
    }
    .wrapper .item .detail{
      font-size: 14px;
      overflow-y: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      padding: 0 9px;
      margin: 8px 0;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="article-wrapper">
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</div>
      </article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</div>
      </article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</div>
      </article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</div>
      </article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</div>
      </article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</div>
      </article>
    </div>
  </div>
</body>
</html>