脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > css卡片列表

CSS实现一个交互感不错的卡片列表功能

  发布时间：2023-08-24 15:19:54   作者：薛定谔的壳   我要评论
这篇文章主要介绍了CSS实现一个交互感不错的卡片列表,涉及到知识块本文结合实例代码给大家讲解的非常详细，需要的朋友可以参考下

0、需求分析

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

1、涉及的主要知识块

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

2、实现效果

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>

到此这篇关于CSS实现一个交互感不错的卡片列表的文章就介绍到这了,更多相关css卡片列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • CSS实现鼠标滑过卡片上浮效果的示例

    这篇文章主要介绍了CSS实现鼠标滑过卡片上浮效果的示例，帮助大家更好的利用CSS制作网页特效，美化自身网页，感兴趣的朋友可以了解下
    2020-11-02

  • css实现网页右下角点赞小卡片效果（实例代码）

    这篇文章主要介绍了css实现网页右下角点赞小卡片效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-02

  • CSS实现卡片3D翻转效果的示例代码

    本篇文章主要介绍了CSS实现卡片3D翻转效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-06

最新评论

关注微信公众号

扫一扫