css 5分种实现丝滑的卡片移出效果

沙粒
5,833 阅读3分钟

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情

前言

卡片的陈列效果很常见，一个个摆平，铺到一个页面上，常见于某某管理中心，类似这样：

image.png

假如这时候产品经理来了一个紧急需求：

  • 想要在当前页面中间位置再显示些其他内容
  • 之前的card数量可能会增加到十几二十个不等
  • 希望新产生的card一眼就能看见，其余的不要求

恰好这时候UI请假了🤣，那就只能自己上了。分析：

  1. 当前页面card的数量不是很多，不至于用真分页
  2. 像上图这样一直铺下去，又比较占空间
  3. 只要一次请求数据然后把card可以折叠起来，优先级高的显示在前边就可以了。

一、效果

直接看效果图：

365_1663208579.gif

二、实现

2.1 搭好骨架

16632130501297.jpg html 代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="popular-articles">
		<div class="mini-card-grid">
			<article class="mini-card ">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>

			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
			<article class="mini-card">
				<strong>
					码上掘金挑战赛
				</strong>
				<br />
				<h3 class="mini-card-title">
					hello，掘友们好，本期的创意投稿大赛主题是码上掘金挑战赛！
				</h3>
				<div class="link">
					<span>show出创意赢大奖!</span>
					<br>
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">详情参见</a> </div>
				<div class="author-row">
					<a href="https://juejin.cn/post/7139728821862793223?utm_source=banner&utm_medium=createcenter&utm_campaign=codejj202209" rel="tag">
						<img alt="" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d31d5677e764ca99096c5b34a3ffddb~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:250.awebp" class="avatar avatar-80 photo jetpack-lazy-image jetpack-lazy-image--handled" height="80" width="80" srcset="https://secure.gravatar.com/avatar/2c12e74c8162614e08a31d704ed9e193?s=160&amp;d=retro&amp;r=pg 2x" data-lazy-loaded="1" loading="eager"></a>
					<br />
					<div data-v-230ce330="" class="date"><span data-v-230ce330="">
							2022.09.05 ~
						</span> <span data-v-230ce330="">
							2022.09.25
						</span>
					</div>
				</div>
			</article>
		</div>
		<div>
</body>

</html>

css 代码

<style type="text/css">
.popular-articles {
	display: flex;
	padding: 1.5rem;
    transform: translateY(-10px);
}

.mini-card-grid {
    padding: 3rem 0 3rem 2rem;
    margin: 0;
    display: flex;
    overflow-x: scroll;
}

.mini-card {

    padding: 24px;
    min-width: 300px;
    min-height: 350px;
    
    /*阴影和渐变*/
	box-shadow: -2rem 0 3rem -2rem #000;
    border-radius: 16px;
    background: linear-gradient(85deg,#434343,#262626);
    color: #fff;

    display: flex;
    flex-direction: column;
    transition: .2s;
    margin: 0;
}

.mini-card-title {
    font-size: 1.3rem;
    margin: 0 0 1rem;
}

.link span {
	background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);
}

.link a {
    font-family: MD Primer Bold;	
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: #ff7a18;
}
</style>

骨架搭好之后，效果应该是这样的：

16632137676221.jpg

2.2 简单动画

2.2.1 简单叠起来

css加上如下代码

body .mini-card:not(:first-child) {
    margin-left: -130px;
    box-shadow: -3rem 0 3rem -2rem #000;
}

效果是这样的

16632139303017.jpg

2.2.2 可以拎起来

加个旋转，css加上如下代码

body .mini-card:focus-within, body .mini-card:hover {
    transform: translateY(-1rem) rotate(3deg);
}

效果是这样的

368_1663216543.gif

2.2.3 后面卡片动起来

使用css兄弟选择器“～”，css加上如下代码

body .mini-card:hover~.mini-card {
    transform: translateX(130px);
}

完成效果：

365_1663208579.gif

结语

这时候UI请假回来了，路过时候时候的瞅了一眼：“哎呦，不错哦～，给你点个赞👍🎉”。

avatar
文章
阅读
粉丝
相关推荐
分享83个CSS3特效，总有一款适合您
22阅读
 · 
0点赞
纯 CSS 实现各种炫酷效果
158阅读
 · 
0点赞
5分钟实现Canvas鼠标跟随动画背景
4.5k阅读
 · 
10点赞
【Ten Mins Effect】 - 07 荧光按钮效果
1.0k阅读
 · 
12点赞
CSS实现底部弧度效果--卡片样式
7.8k阅读
 · 
84点赞