目录
- 0、需求分析
- 1、涉及的主要知识块
- 2、实现效果
- 3、代码
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>
<p class="fb6f-a104-ccbb-153f wrapper">
<p class="a104-ccbb-153f-d2e9 article-wrapper">
<article class="ccbb-153f-d2e9-7778 item">
<h5 class="153f-d2e9-7778-d475 title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
<p class="d2e9-7778-d475-a75c cover"></p>
<p class="7778-d475-a75c-6d86 detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</p>
</article>
<article class="bbd1-ec1c-39f2-d1e9 item">
<h5 class="ec1c-39f2-d1e9-fb6f title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
<p class="39f2-d1e9-fb6f-a104 cover"></p>
<p class="d1e9-fb6f-a104-ccbb detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</p>
</article>
<article class="a104-ccbb-153f-d2e9 item">
<h5 class="ccbb-153f-d2e9-7778 title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
<p class="153f-d2e9-7778-d475 cover"></p>
<p class="d2e9-7778-d475-a75c detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</p>
</article>
<article class="7778-d475-a75c-6d86 item">
<h5 class="d475-a75c-6d86-0194 title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
<p class="ce9a-8bd4-78fb-0788 cover"></p>
<p class="8bd4-78fb-0788-bbd1 detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</p>
</article>
<article class="78fb-0788-bbd1-ec1c item">
<h5 class="0788-bbd1-ec1c-39f2 title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
<p class="bbd1-ec1c-39f2-d1e9 cover"></p>
<p class="ec1c-39f2-d1e9-fb6f detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</p>
</article>
<article class="39f2-d1e9-fb6f-a104 item">
<h5 class="d1e9-fb6f-a104-ccbb title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下</h5>
<p class="fb6f-a104-ccbb-153f cover"></p>
<p class="a104-ccbb-153f-d2e9 detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收</p>
</article>
</p>
</p>
</body>
</html>到此这篇关于CSS实现一个交互感不错的卡片列表的文章就介绍到这了,更多相关css卡片列表内容请搜索酷瑞百科以前的文章或继续浏览下面的相关文章，希望大家以后多多支持酷瑞百科！
☆未收藏(0)
