css绘制聚类(聚簇)图标
已被阅读 612 次 | 文章分类:css | 2021-12-08 22:45
可以将该css样式的聚类图标应用在地图上
1 全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聚簇图标</title>
<style>
body{
display: flex;
align-items: center;
vertical-align: middle;
}
.outer{
width: 24px;
height: 24px;
background-color: #cde7ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.inner{
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #249aff;
display: flex;
justify-content: center;
align-items: center;
}
.inner span{
display: block;
font-size: 12px;
color: white;
}
.outer_two{
width: 32px;
height: 32px;
}
.inner_two{
width: 24px;
height: 24px;
}
.outer_three{
width: 40px;
height: 40px;
}
.inner_three{
width: 32px;
height: 32px;
}
.outer_four{
width: 48px;
height: 48px;
}
.inner_four{
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<span>7</span>
</div>
</div>
<div class="outer outer_two">
<div class="inner inner_two">
<span>23</span>
</div>
</div>
<div class="outer outer_three">
<div class="inner inner_three">
<span>132</span>
</div>
</div>
<div class="outer outer_four">
<div class="inner inner_four">
<span>1232</span>
</div>
</div>
</body>
