1. Toy模板网首页
  2. > Toy博客

CSS实现多头像叠加ui效果

9月前 作者：Rlm* 分类：Toy博客 阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了CSS实现多头像叠加ui效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、 CSS实现多头像叠加ui效果

第一种实现方式

简单粗暴直接使用margin-right实现，缺点是第一行右侧最右边头像溢出容器，代码中的三行注释的代码放开后可解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 375px;
      height: 100vh;
      border: 1px solid #000;
      /*解决溢出问题的三行代码
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      */
    }
    .img-item {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: -25px;
    }
  </style>
</head>
<body>
  <div class="container"> 
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
    <img class="img-item" src="http://ued.test.jk.com/assets/img/example.d1961620.png" alt="">
  </div>
</body>
</html>

CSS实现多头像叠加ui效果

      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

CSS实现多头像叠加ui效果
第二种实现方式

在第一种的基础上使用flex布局，通过外层元素来限制图片的位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 375px;
      height: 100vh;
      border: 1px solid #f00;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .wrapper {
      width: 45px;
      height: 60px;
      border: 1px silid #000;
      margin-bottom: 0;
    }
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
    <div class="wrapper"><img src="http://ued.test.jk.com/assets/img/example.d1961620.png"></div>
  </div>
</body>
</html>

二、CSS，头像堆叠，自动排序，一行五个，居中显示

类似拼多多拼单效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.gorup{
				display: flex;
				flex-wrap: wrap;
				width: 240px;
				justify-content: center;
			}
			.gorup>div{
				margin-bottom: 10px;
				margin-right: 1px;
				width: 40px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: #fff;
				
			}
			.gorup>div>span{
				display:inline-block;
				width: 50px;
				height: 50px;
				background: gainsboro;
				border-radius: 50%;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="gorup">
			<div><span>1</span></div>
			<div><span>2</span></div>
			<div><span>3</span></div>
			<div><span>4</span></div>
			<div><span>5</span></div>
			<div><span>6</span></div>
			<div><span>7</span></div>
			<div><span>8</span></div>
			<div><span>9</span></div>
		</div>
	</body>
</html>

CSS实现多头像叠加ui效果

三、头像过渡效果，头像显示为圆形，且当鼠标移到图片上时图片会有放大效果

<html>  
    <head>  
        <title>CSS学习之路</title>  
        <meta http-equiv="Content-Type" content="text/html;" />
        <meta charset="UTF-8">
        <meta name="keywords" content="css 笔记" />  
        <meta name="description" content="shaoyuli的CSS3积累笔记" /> 
        <style>
            body {
                position: relative
            }
            .profile {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            img {
               cursor: pointer;
                border-radius: 50%;
                -webkit-transition: all 0.5s;
                -o-transition: all 0.5s;
            }
            img:hover {
                transform: scale(1.5);
                border: 3px solid red;
            }
        </style>
    </head> 
    <body> 
        <div class="profile">
                <img src="./download.jpeg" alt="">
        </div>
    </body> 
</html>

四、语音播放小喇叭

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>微信语音样式</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 120px;
            height: 120px;
            box-sizing: border-box;
            position: relative;
            margin: 50px auto;
        }
        .wifi-symbol {
            width: 50px;
            height: 50px;
            box-sizing: border-box;
            overflow: hidden;
            transform: rotate(135deg);

        }
        .wifi-circle {
            border: 5px solid #999999;
            border-radius: 50%;
            position: absolute;
        }

        .first {
            width: 5px;
            height: 5px;
            background: #cccccc;
            top: 45px;
            left: 45px;
        }

        .second {
            width: 25px;
            height: 25px;
            top: 35px;
            left: 35px;
            animation: fadeInOut 1s infinite 0.2s;.
        }

        .third {
            width: 40px;
            height: 40px;
            top: 25px;
            left: 25px;
            animation: fadeInOut 1s infinite 0.4s;
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0; /*初始状态 透明度为0*/
            }
            100% {
                opacity: 1; /*结尾状态 透明度为1*/
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wifi-symbol">
            <div class="wifi-circle first"></div>
            <div class="wifi-circle second"></div>
            <div class="wifi-circle third"></div>
        </div>
    </div>
</body>
</html>

五、图像悬停效果

CSS实现多头像叠加ui效果

//【html】
<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>图像悬停效果</title>
    <link rel="stylesheet" href="../css/70.css">
</head>
 
<body>
    <div class="container">
        <div class="box">
            <div class="img-box">
                <img src="../images/op/4.jpg" alt="">
            </div>
            <div class="text-box">
                <div>
                    <h2>娜美</h2>
                    <p>娜美，日本漫画《航海王》及衍生作品中的女主角，草帽一伙的航海士，人称“小贼猫”。</p>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="img-box">
                <img src="../images/op/5.jpg" alt="">
            </div>
            <div class="text-box">
                <div>
                    <h2>乌索普</h2>
                    <p>乌索普，日本漫画《海贼王》及其衍生作品中的男性角色。草帽一伙狙击手，被称作“GOD·乌索普”。</p>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="img-box">
                <img src="../images/op/6.jpg" alt="">
            </div>
            <div class="text-box">
                <div>
                    <h2>乔巴</h2>
                    <p>托尼托尼·乔巴，日本漫画《航海王》及其衍生作品中的角色。乔巴是草帽一伙的船医，吃了人人果实的驯鹿，可用蓝波球进行八段变形。</p>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="img-box">
                <img src="../images/op/7.jpg" alt="">
            </div>
            <div class="text-box">
                <div>
                    <h2>弗兰奇</h2>
                    <p>弗兰奇（原名：卡特·弗兰姆）是日本漫画《航海王》及其衍生作品中的角色。草帽一伙船匠，性格豪放，喜欢唱歌，跳奇怪的舞，下身喜欢只穿一条短裤。身为改造人的弗兰奇，藏着各种兵器。</p>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

//css
*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    /* 元素的总宽度和高度包含内边距和边框 */
    box-sizing: border-box;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#e7f0fd,#accbee);
}
.container{
    /* 相对定位 */
    position: relative;
    /* 弹性布局 横向排列 允许换行 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.container .box{
    position: relative;
    width: 275px;
    height: 275px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 动画过渡 */
    transition: 0.5s;
}
/* 鼠标移入，盒子变大 */
.container .box:hover{
    z-index: 1;
    transform: scale(1.25);
    box-shadow: 0 25px 40px rgba(0,0,0,0.5);
}
.container .box .img-box{
    /* 绝对定位 */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
/* 渐变遮罩（黑色——透明） 默认隐藏 */
.container .box .img-box::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to top,#222,transparent);
    /* mix-blend-mode: multiply; */
    opacity: 0;
    transition: 0.5s;
}
/* 鼠标移入，渐变遮罩显示 */
.container .box:hover .img-box::before{
    opacity: 1;
}
.container .box .img-box img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* 保持原有尺寸比例，裁切长边 */
    object-fit: cover;
}
.container .box .text-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    z-index: 2;
    /* 弹性布局 元素位于容器的结尾 */
    display: flex;
    align-items: flex-end;
}
.container .box .text-box h2{
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
    /* 默认移出可视范围 */
    transform: translateY(200px);
    transition: 0.5s;
}
.container .box:hover .text-box h2{
    /* 鼠标移入，移入可视范围 */
    transform: translateY(0);
    /* 设置动画延迟 */
    transition-delay: 0.3s;
}
.container .box .text-box p{
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    /* 默认移出可视范围 */
    transform: translateY(200px);
    transition: 0.5s;
}
.container .box:hover .text-box p{
    /* 鼠标移入，移入可视范围 */
    transform: translateY(0);
    /* 设置动画延迟 */
    transition-delay: 0.4s;
}

六、3D卡片hover翻转效果

CSS实现多头像叠加ui效果文章来源地址https://www.toymoban.com/news/detail-505480.html

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>3D卡片hover翻转效果</title>
    <link rel="stylesheet" href="../css/96.css">
</head>
 
<body>
    <section>
        <div class="card">
            <div class="box">
                <div class="img-box">
                    <img src="../images/op/1.jpg" alt="">
                </div>
                <div class="con-box">
                    <div>
                        <h2>蒙奇·D·路飞</h2>
                        <p>蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。外号“草帽”路飞，是草帽一伙、草帽大船团的船长，极恶的世代之一。橡胶果实能力者，悬赏金15亿贝里。梦想是找到传说中的One Piece，成为海贼王。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="img-box">
                    <img src="../images/op/2.jpg" alt="">
                </div>
                <div class="con-box">
                    <div>
                        <h2>罗罗诺亚·索隆</h2>
                        <p>罗罗诺亚・索隆，日本漫画《航海王》及其衍生作品中的角色。“草帽一伙”的战斗员，人称“海贼猎人”。2年前登陆香波地群岛的11位“超新星”其中的一位。同时也是被人称作“极恶的世代”中的一位。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="img-box">
                    <img src="../images/op/3.jpg" alt="">
                </div>
                <div class="con-box">
                    <div>
                        <h2>山治</h2>
                        <p>山治，日本漫画《海贼王》及其衍生作品中的角色。草帽一伙的厨师，因踢技快准狠被海军称之为“黑足”，悬赏金为3亿3000万贝里。海贼中的绅士，有着卷曲眉毛，永远遮住半边脸的家伙，香烟不离口，最爱女人，很花心但很有风度，从不愿意伤害任何女性，哪怕是敌人。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
 
</html>

// css
*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* 100%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg,#fff1eb,#ace0f9);
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.card{
    /* 相对定位 */
    position: relative;
    width: 320px;
    height: 320px;
    margin: 20px;
    /* 开启3D效果 */
    transform-style: preserve-3d;
    perspective: 1000px;
}
.card .box{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* 设置过渡 */
    transition: 1s ease;
}
.card .box .img-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card .box .img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card .box .con-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 隐藏旋转div元素的背面 */
    backface-visibility: hidden;
    transform-style: preserve-3d;
    /* 默认沿Y轴旋转180度 */
    transform: rotateY(180deg);
}
.card .box .con-box div{
    transform-style: preserve-3d;
    padding: 20px;
    color: #fff;
    /* 渐变背景 */
    background: linear-gradient(30deg,#514a9d,#24c6dc);
    /* 默认沿Z轴偏移100px */
    transform: translateZ(100px);
}
.card .box .con-box div h2{
    font-size: 20px;
    letter-spacing: 1px;
}
.card .box .con-box div p{
    margin-top: 5px;
    font-size: 15px;
    text-align: justify;
}
.card:hover .box{
    /* 鼠标移入，盒子旋转180度 */
    transform: rotateY(180deg);
}

到了这里，关于CSS实现多头像叠加ui效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 炫酷UI前端效果的CSS生成工具

    它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。 而且这个工具，可

    2024年02月12日
    浏览(39)
  • 创建多图层叠加效果的背景与人物图像

    创建多图层叠加效果的背景与人物图像

    引言： 在现代应用程序开发中，图形资源的使用是非常常见的，特别是在用户界面设计中。通过使用TImageList和TGlyph组件的组合，我们可以实现令人印象深刻的多图层叠加效果。本文将介绍如何使用这两个组件来创建背景和人物的多图层叠加效果，为您的应用程序增添视觉吸

    2024年02月13日
    浏览(41)
  • element ui实现el-upload用户头像上传（单图上传）

    element ui实现el-upload用户头像上传（单图上传）

     这是我们要实现的效果 element ui上的代码和效果如下：  接下来我们需要将图片文件上传到接口中，实现代码如下：

    2024年02月12日
    浏览(47)
  • 【Unity ShaderGraph】| 快速制作一个 表面水纹叠加效果

    【Unity ShaderGraph】| 快速制作一个 表面水纹叠加效果

    前言 本文将使用ShaderGraph制作一个表面水纹叠加效果，可以直接拿到项目中使用。 对ShaderGraph还不了解的小伙伴可以参考这篇文章：【Unity ShaderGraph】| Shader Graph入门介绍 | 简介 | 配置环境 | 窗口介绍 | 简单案例 下面就开始看一下具体的制作流程，然后自己动手制作一个吧！

    2024年01月19日
    浏览(58)
  • AI文本生图模型Stable Diffusion部分模型叠加效果

    AI文本生图模型Stable Diffusion部分模型叠加效果

    兄弟们,最近有个烦恼,就是找图有点费事,干脆自己部署个文本生图模型Stable Diffusion,虽然机器性能慢,但是效果还可以,先和大家截图分享下,后面将映射ai.shenjian.online供大家免费使用 1. 效果预览 2. 主模型及插件安装 下载模型icerealistic_v21.safetensors放到./models/Stable-diffusion/下 下载

    2024年01月20日
    浏览(42)
  • 纯CSS实现边框流光效果（跑马灯效果）

    纯CSS实现边框流光效果（跑马灯效果）

    首先上一个效果图 有木有发现和夜晚街上的广告牌很像，接下来让我们看看如何使用css实现的吧 首先很明显应该使用一个盒子将文字装起来，并且将文字进行了居中，然后我们看到这盒子的周围围绕了两条光带，那么这两条光带是怎么实现的呢？ 其实这是用四个小盒子实现

    2024年02月07日
    浏览(51)
  • css 实现3D效果

    css 实现3D效果

    主要用到两个属性：transform-style属性和animation属性 transform-style是用来开启3D效果的属性，而animation是用来让元素实现3D的动画效果 我们以制作一个3D的立方体为例。 transform详细属性，animation详细属性 先把html部分写出来，我们需要把立方体的6个面都先表示出来。 上面分别把

    2024年02月09日
    浏览(45)
  • css 实现太极效果

    css 实现太极效果

    本次主要介绍::after，::before，box-shadow这三个属性。 ::after，::before这两个是伪类选择器，box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插入内容 使用content 属性来指定要插入的内容 ， 值可以为空，但是不能不写，如果不写的话伪类选择

    2023年04月22日
    浏览(33)
  • 基于css实现动画效果

    基于css实现动画效果

            本文将会基于css，实现各种动画效果，接下来会从简单几个例子入手。 效果 效果展示

    2024年01月23日
    浏览(57)
  • CSS实现底部弧度效果

    CSS实现底部弧度效果

    效果图如下 说明： 使用伪类处理，先将元素自身定位为relative; 伪类设置content:‘’，并相对定位为absolute，通过设置left ,top 值，改变width和和left来调节弧度。 宽度需大于100%，将left设为（100%-宽度）/ 2，伪类宽度越接近100%，弧度越大 。

    2024年02月15日
    浏览(90)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包