欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)一個交互感不錯的卡片列表功能

  發(fā)布時間：2023-08-24 15:19:54   作者：薛定諤的殼   我要評論
這篇文章主要介紹了CSS實現(xiàn)一個交互感不錯的卡片列表,涉及到知識塊本文結(jié)合實例代碼給大家講解的非常詳細，需要的朋友可以參考下

0、需求分析

  • 橫向滾動
  • 鼠標懸停時突出顯示
    • 默認堆疊展示
    • 鼠標懸停時，完整展示當前塊+適當旋出效果
  • 移動端樣式優(yōu)化、磁吸效果
  • 美化滾動條

1、涉及的主要知識塊

  • flex 布局
  • css 簡單變換+過渡
    • transform、transition
  • 漸變色函數(shù)
    • linear-gradient
    • …
  • 偽類、偽元素
    • 滾動條、::after、 ::before
    • …

2、實現(xiàn)效果

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">黑夜從大地上升起遮住了光明的天空豐收后荒涼的大地黑夜從你內(nèi)部升起你從遠方來， 我到遠方去遙遠的路程經(jīng)過這里天空一無所有為何給我安慰豐收之后荒涼的大地人們?nèi)∽吡艘荒甑氖粘扇∽吡思Z食騎走了馬留在地里的人， 埋的很深草叉閃閃發(fā)亮， 稻草堆在火上稻谷堆在黑暗的谷倉谷倉中太黑暗， 太寂靜， 太豐收</div>
      </article>
      <article class="item">
        <h5 class="title">這是一個標題，可能會有好多個字，然后導致兩行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜從大地上升起遮住了光明的天空豐收后荒涼的大地黑夜從你內(nèi)部升起你從遠方來， 我到遠方去遙遠的路程經(jīng)過這里天空一無所有為何給我安慰豐收之后荒涼的大地人們?nèi)∽吡艘荒甑氖粘扇∽吡思Z食騎走了馬留在地里的人， 埋的很深草叉閃閃發(fā)亮， 稻草堆在火上稻谷堆在黑暗的谷倉谷倉中太黑暗， 太寂靜， 太豐收</div>
      </article>
      <article class="item">
        <h5 class="title">這是一個標題，可能會有好多個字，然后導致兩行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜從大地上升起遮住了光明的天空豐收后荒涼的大地黑夜從你內(nèi)部升起你從遠方來， 我到遠方去遙遠的路程經(jīng)過這里天空一無所有為何給我安慰豐收之后荒涼的大地人們?nèi)∽吡艘荒甑氖粘扇∽吡思Z食騎走了馬留在地里的人， 埋的很深草叉閃閃發(fā)亮， 稻草堆在火上稻谷堆在黑暗的谷倉谷倉中太黑暗， 太寂靜， 太豐收</div>
      </article>
      <article class="item">
        <h5 class="title">這是一個標題，可能會有好多個字，然后導致兩行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜從大地上升起遮住了光明的天空豐收后荒涼的大地黑夜從你內(nèi)部升起你從遠方來， 我到遠方去遙遠的路程經(jīng)過這里天空一無所有為何給我安慰豐收之后荒涼的大地人們?nèi)∽吡艘荒甑氖粘扇∽吡思Z食騎走了馬留在地里的人， 埋的很深草叉閃閃發(fā)亮， 稻草堆在火上稻谷堆在黑暗的谷倉谷倉中太黑暗， 太寂靜， 太豐收</div>
      </article>
      <article class="item">
        <h5 class="title">這是一個標題，可能會有好多個字，然后導致兩行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜從大地上升起遮住了光明的天空豐收后荒涼的大地黑夜從你內(nèi)部升起你從遠方來， 我到遠方去遙遠的路程經(jīng)過這里天空一無所有為何給我安慰豐收之后荒涼的大地人們?nèi)∽吡艘荒甑氖粘扇∽吡思Z食騎走了馬留在地里的人， 埋的很深草叉閃閃發(fā)亮， 稻草堆在火上稻谷堆在黑暗的谷倉谷倉中太黑暗， 太寂靜， 太豐收</div>
      </article>
      <article class="item">
        <h5 class="title">這是一個標題，可能會有好多個字，然后導致兩行展示不了，需要省略一下</h5>
        <div class="cover"></div>
        <div class="detail">黑夜從大地上升起遮住了光明的天空豐收后荒涼的大地黑夜從你內(nèi)部升起你從遠方來， 我到遠方去遙遠的路程經(jīng)過這里天空一無所有為何給我安慰豐收之后荒涼的大地人們?nèi)∽吡艘荒甑氖粘扇∽吡思Z食騎走了馬留在地里的人， 埋的很深草叉閃閃發(fā)亮， 稻草堆在火上稻谷堆在黑暗的谷倉谷倉中太黑暗， 太寂靜， 太豐收</div>
      </article>
    </div>
  </div>
</body>
</html>

到此這篇關(guān)于CSS實現(xiàn)一個交互感不錯的卡片列表的文章就介紹到這了,更多相關(guān)css卡片列表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論