效果图：
code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 文字渐变色</title>
<style>
span {
background-image: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
h1{
position: relative;
color: yellow;
}
h1:before{
content: attr(text);
position: absolute;
z-index: 10;
color:pink;
-webkit-mask:linear-gradient(to left, red, transparent );
} .content{
text-align: center;
height: 50px;
line-height: 50px;
width: 180px;
margin: 100px auto;
padding: 5px;
background-color: rgb(196,0,0);
color: white;
font-size: 18px;
position: relative;
}
.content:hover{
cursor: pointer;
}
.content:hover:before{
content: attr(data-content); /*动态获取数据*/
position: absolute;
left: 100%;
width:200px;
height: 50px;
font-size: 18px;
line-height: 50px;
background-color: rgb(0,196,0);
margin-left: 12px;
}
.content:hover:after{ /*实现小三角*/
content: "";
position: absolute;
left: 100%;
top: 50%;
margin: -10px 0 0 -8px; width: 0;
height: 0;
border:10px solid transparent;
border-right-color: rgb(0,196,0)
} /* 3角型原理 详细可参考https://www.cnblogs.com/shazhou-blog/p/5168740.html */
#span1 {
width:0;
height:0;
overflow:hidden;
border:7px solid transparent;
border-top-color:#2DCB70;
/* top就是倒三角，bottom就是上三角，left,right类似 */
}
</style>
</head>
<body>
https://blog.csdn.net/fe_dev/article/details/78450844
<br>
<span>前端简单说</span> <h1 text="前端简单说">前端简单说</h1> <div data-content="我是一个悬浮提示框" class="content">鼠标滑过我 我是css</div> <span id="span1"></span>
</body>
</html>