今天在群里看到一个特别有意思的小交互，分享给大家。类似于抖音的聊天气泡，气泡是渐变的形式并且随着滚动变化。
1. 设计图
2. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>聊天气泡渐变</title>
<style>
:root {
--gradient-from: 100px;
--gradient-to: 300px;
}
* {
margin: 0;
padding: 0;
}
body {
background: #e0e0e0;
}
.chatbox {
max-height: 100vh;
padding: 20px;
box-sizing: border-box;
overflow-x: hidden;
}
.chat-message {
padding: 16px;
border-radius: 10px 10px 0 10px;
color: white;
font-size: 14px;
margin-bottom: 30px;
background-image: linear-gradient(
to bottom,
#509cff var(--gradient-from),
#6a68f3 var(--gradient-to)
);
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="chatbox">
<div class="chat-message" v-for="item in chatList">{{ item }}</div>
</div>
</body>
<script src="//unpkg.com/vue@2.7.16/dist/vue.js"></script>
<script>
new Vue({
el: ".chatbox",
data: {
chatList: [
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111",
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111",
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111",
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111",
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111",
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111",
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111",
"你好，我最近心里特别难受，感觉自己快撑不下去了。 所以想来咨询一下。（闭着眼）",
"你好，111111"
]
},
mounted() {
const chatboxBoundary = document.querySelector(".chatbox").getBoundingClientRect();
document.documentElement.style.setProperty("--gradient-from", chatboxBoundary.top + "px");
document.documentElement.style.setProperty("--gradient-to", chatboxBoundary.bottom + "px");
}
});
</script>
</html>
