照着别人代码敲得，用的是阿里巴巴的矢量图（被我照着的那个大神当然不会这么low），有响应式
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/MessageYoungTest.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1373789_8ft9twd09vv.css"/>
</head>
<body>
<div class="contont-info">
<div class="card">
<i class="card-icon iconfont icon-scan"></i>
<p>scan</p>
</div>
<div class="card">
<i class="card-icon iconfont icon-qrcode"></i>
<p>qrcode</p>
</div>
<div class="card">
<i class="card-icon iconfont icon-WIFI"></i>
<p>WIFI</p>
</div>
</div>
</body>
</html>
css：
*{
margin: 0;
padding: 0;
font-family: "microsoft yahei" serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #778ca3;
}
.contont-info{
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0 20px;
color: #fff;
}
.card-icon{
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
font-size: 30px!important;
font-weight: 100;
transition: 0.3s linear;
background: #26de81;
text-align: center;
}
.card:hover .card-icon{
color: #26de81;
background: none;
transform: scale(1.6);
}
.card p{
max-height: 0;
font-size: 20px;
margin-top: 20px;
letter-spacing: 2px;
opacity: 0;
font-weight: 300;
transition: 0.3s linear;
}
.card:hover p{
max-height: 20px;
opacity: 1;
}
.card{
background: #4b6584;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 10px;
width: calc(33% - 20px);
height: 80px;
padding: 50px 20px;
}
@media screen and (max-width:800px){
.contont-info{
flex-direction: column;
}
.card{
width: 100%;
max-width: 300px;
margin: 10px 0;
}
}
效果图：
另外推荐一个取色网站：https://flatuicolors.com/
