html+css+js实现Badge 标记
实现效果：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badge 标记</title>
<link rel="stylesheet" href="./font_4689118_hfv5befzhmw/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
.source{
margin: 50px auto;
width: 870px;
height: 80px;
padding: 24px;
border: 1px solid #ecf5ff;
}
.content{
display: flex;
}
.content .badge{
margin-right: 40px;
position: relative;
}
.badge button{
cursor: pointer;
width: 55px;
height: 30px;
color: #606266;
border: 1px solid #c0c4cc;
background-color: #fff;
border-radius: 2px;
}
button:hover{
border: 1px solid rgba(64, 158, 255, 0.1);
background-color:rgba(64, 158, 255, 0.1);
color:#409eff ;
}
.badge span{
position: absolute;
left: 45px;
top: -10px;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
font-size: 12px;
color: #fff;
text-align: center;
background-color: #f56c6c;
}
.badge:nth-child(1) span{
width: 35px;
border-radius: 10px;
}
.badge:nth-child(3) span{
background-color: #409eff;
}
.badge:nth-child(4) span{
background-color: #e6a23c;
}
.dropdown{
position: relative;
}
.dropdown .header{
cursor: pointer;
height: 30px;
line-height: 30px;
font-size: 14px;
color:#409eff ;
}
.footer{
position: absolute;
right: 0;
padding: 12px 0;
width: 100px;
border: 1px solid #c0c4cc;
border-radius: 3px;
color: #606266;
transition: all 0.3s ease;
transform-origin: top;
}
.footer li{
height: 38px;
line-height: 38px;
text-align: center;
}
.footer li:hover{
cursor: pointer;
background-color:rgba(64, 158, 255, 0.1);
color:#409eff ;
}
.footer li span{
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50%;
font-size: 12px;
color: #fff;
text-align: center;
background-color: #f56c6c;
margin-left: 5px;
}
.footer li:nth-child(1) span{
width:25px;
border-radius: 9px;
}
.footer.hide{
transform: scaleY(0); /* Hide the footer */
}
</style>
</head>
<body>
<div class="source">
<div class="content">
<div class="badge">
<button>评论</button>
<span>12</span>
</div>
<div class="badge">
<button>回复</button>
<span>3</span>
</div>
<div class="badge">
<button>评论</button>
<span>1</span>
</div>
<div class="badge">
<button>回复</button>
<span>2</span>
</div>
<div class="dropdown">
<div class="header">
<span>点我查看</span>
<span class="iconfont icon-jiantou"></span>
</div>
<ul class="footer hide">
<li>评论<span>12</span></li>
<li>回复<span>3</span></li>
</ul>
</div>
</div>
</div>
<script>
document.querySelector('.dropdown .header').addEventListener('click',function(){
const footer = this.nextElementSibling;
footer.classList.toggle('hide')
})
</script>
</body>
</html>原文地址：https://blog.csdn.net/weixin_62831076/article/details/143079114
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！