可滚动渐变聊天气泡-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

可滚动渐变聊天气泡

P粉197639753 2023-09-01 11:52:18

[CSS3讨论组]

957

<p>我想要一个带有渐变的聊天气泡的白色容器，当滚动时，渐变会随着下面的渐变而变化，如本例所示：</p> <p>我尝试将任何 <code>chatBubble</code> 后面的 <code>.container</code> 部分设为透明，以便 <code>.root</code> 的背景可见。 </p> <p> <pre class="brush:css;toolbar:false;">.root { background-color: linear-gradient(red, yellow); width: 100vw; height: 100vh; } .container { width: 100%; height: 100vh; background-color: white } .chatBubble { background-color: transparent; border-radius: 4px; min-width: 50; padding: 10px; }</pre> <pre class="brush:html;toolbar:false;"><div class="root"> <div class="container"> <chatBubble>This is a chat bubble</chatBubble> <chatBubble>This is another chat bubble</chatBubble> </div> </div></pre> </p>

P粉197639753

全部回复(2)

P粉2935505752023-09-02 11:22:49 2楼

这就是我到目前为止所得到的，试图掩盖它，这样我就可以让白色背景与渐变一起使用。

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  max-width: 60ch;
  margin: auto;
  padding: 1rem;
  background-color: white;
}

.container::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(red, yellow);
}

.bubble {
  z-index: 1;
  min-width: 50px;
  width: fit-content;
  background-color: #eee;
  border-radius: 4px;
  padding: 0.5em;
  margin: 0.2em;
  text-wrap: balance;
}

.bubble.primary {
  color: white;
  background-color: transparent;
  background-blend-mode: multiply;
  align-self: end;
  text-align: end;
}

<div class="container">
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way to long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way to long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way to long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
</div>

赞 +0

添加回复

P粉2778243782023-09-02 11:18:14 1楼

您可以从 .bubble 中“放置阴影”：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  --gap: 20px;
  --width: 800px;
  --background: #fff;
  display: flex;
  flex-direction: column;
  max-width: var(--width);
  margin: 16px auto;
  padding: 0 16px;
  overflow: hidden;
  gap: var(--gap);
  box-shadow: 0 0 0 100vw var(--background);
  font-family: sans-serif;
}

.container:before {
  content: '';
  inset: 0;
  position: fixed;
  z-index: -1;
  background: linear-gradient(purple, blue);
}

.bubble {
  max-width: 80%;
  background-color: lightgray;
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: 0 0 0 var(--gap) var(--background);
  position: relative;
}

.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  inset: calc(var(--gap) / -2) auto;
  background-color: var(--background);
  width: var(--width);
}

.bubble::before {
  right: 100%;
}

.bubble::after {
  left: 100%;
}

.bubble.primary {
  background-color: transparent;
  color: #fff;
  align-self: flex-end;
}

<div class="container">
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way to long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way to long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way to long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
</div>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>