前端写图片、头像或者卡片堆叠效果（类似京东，拼多多效果）

最新推荐文章于 2023-08-17 20:05:32 发布

乔的大明

最新推荐文章于 2023-08-17 20:05:32 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/qq_43296918/article/details/114368515

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在大多商品卡或者推广都有xx正在买，展示头像堆叠效果

像下面效果（图片从左到右的堆叠效果）

样式效果

下面是代码思路（可参考可改造）

主题思路是定位，然后移动一定的位置，从而实现效果。
加上边框，头像间更加明显
代码如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>头像堆叠效果</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			.content {
				height: 200px;
				width: 100%;
				display: flex;
				align-items: center;
				background: rgba(0, 0, 0, 0.08);
			}

			.box {
				width: 140px;
				height: 36px;
				margin-right: 40px;
				position: relative;
			}

			.box img {
				position: absolute;
				top: 0;
				left: 0;
				display: inline-block;
				height: 36px;
				width: 36px;
				border-radius: 50%;
				border: 1px solid white;
			}
		</style>
	</head>

	<body>
		<div class="content">
			<div class="box">
				<img style="left: 0px;z-index: 10;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/9ch6o1Q4sGeyQNn59rEia1KUDhqaqgKj0EvrAjAODotJjujibp2KNKgDzicoMiaHTt4OSoOfG0m1qXdxjpbCgaJbvw/132"
				 alt="">
				<img style="left: 26px;z-index: 9;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epibL8GXXIxwQ1184lSsoq9Sx4QZq0BpniawFkgTM9Qo1AXAbmkVrHn4UqNLrzCStQvGrMRpXggAx2A/132"
				 alt="">
				<img style="left: 52px;z-index: 8;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/jL0T8DLC74JfyqJnmDfa2nvoibSGxd9mtzZl5x5arwOGKE9SImibE5diaT7IGI1UC8NcmRxkVGnSiarXwHyEKNlmGg/132"
				 alt="">
				<img style="left: 78px;z-index: 7;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/L83eicZrpwiaZWbMvlwJicvEmgeS1DeGn0CmnwxrB6HzZ5NgGnRyl5DG83j3HYtdwygQNYnw6O4SnArY9icgBMcIvA/132"
				 alt="">
				<img style="left: 104px;z-index: 6;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/2a698uaNcjrSHic8JGf7ib97lqdwIOaLiaIWYricXIrEqicq8aZSyPiaUJgu2GZ0tlgtlicAibuoLxCJ888SQ7LGPT25WQ/132"
				 alt="">
			</div>
		</div>
	</body>
</html>

代码效果展示如下

在这里插入图片描述

商品卡上的评论数处理，见往期的博客（谢谢来访）

乔的大明

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
前端写图片、头像或者卡片堆叠效果（类似京东，拼多多效果）

现在大多商品卡或者推广都有xx正在买，展示头像堆叠效果像下面效果（图片从左到右的堆叠效果）下面是代码思路（可参考可改造）主题思路是定位，然后移动一定的位置，从而实现效果。加上边框，头像间更加明显代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫