css实现冒泡文字提示框

今天给各位小伙伴分享一款比较好看的文字提示框，实现的方法也很简单，代码自取。

html代码

<div class="inner">
<span>i</span>
<h1>Hey</h1>
<p>这是一张信息卡他会告诉你一些重要的信息</p>
</div>

css代码

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display:flex;
justify-content: center;
align-items:center;
min-height:100vh;
}
.inner{
background: #09c999;
color:#fff;
padding:1em;
width:250px;
border-radius:10px;
}
.inner span{
float:right;
}
.inner span{
font-weight:700;
font-size:24px;
}
.inner p{
font-size:0.8em;
}
.inner{
clip-path:circle(10% at 90% 20%);
}
.inner span{
line-height:12px;
margin-right:2.5%;
}
.inner:hover{
clip-path: circle(75%);
}
.inner:hover{
background:#00b6ff;
}
.inner:hover span{
color:rgba(255,255,255,0);
}
.inner{
transition:.5s ease-in-out;
}
.inner span{
transition: color .5s;
}
body{
background:#000;
}