效果圖：
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>