Css / React语音气泡小部件 - 腾讯云开发者社区

文章/答案/技术大牛

发布

点滴匠心，声入人心

更合理的气泡长度变化规则 -“语音越长，气泡越长，so easy~” 气泡越长代表语音越长。但你可能没注意过，其实气泡长度是随着语音时长呈线性变化。...那你岂不是没法体验到史上最简洁的QQ页面，也不能发现底部tab小惊喜了？...'); var head = document.getElementsByTagName('head')[0]; link.rel = 'stylesheet'; link.type = 'text/css...'; link.href = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg_new/winwx45ba31.css"; head.appendChild...取消发布到看一看确定最多200字，当前共字发送中微信扫一扫关注该公众号微信扫一扫使用小程序即将打开""小程序取消打开

1.2K4 0

QQ 8.0改版策划故事

更合理的气泡长度变化规则 -“语音越长，气泡越长，so easy~” 气泡越长代表语音越长。但你可能没注意过，其实气泡长度是随着语音时长呈线性变化。...那你岂不是没法体验到史上最简洁的QQ页面，也不能发现底部tab小惊喜了？...'); var head = document.getElementsByTagName('head')[0]; link.rel = 'stylesheet'; link.type = 'text/css...'; link.href = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg_new/winwx45ba31.css"; head.appendChild...微信扫一扫使用小程序即将打开""小程序取消打开

1.6K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

React 轮播动画探索

import { Swiper, SwiperSlide } from"swiper/react"; // Import Swiper styles import"swiper/css"; import"swiper.../css/navigation"; import"swiper/css/pagination"; import"swiper/css/scrollbar"; import"....用 react-transition-group 实现氛围气泡了解了 react-transition-group 之后，我们很容易联想到，可以用 CSSTransition + SwitchTransition...这样的好处在于，相比 swiper/react 通过状态和实例来维护气泡的方式，我们统一使用状态来维护气泡数据更加符合数据驱动视图的思想。 3.2....效果模拟为了试验效果，我们在外部设置一段 mock 逻辑，来模拟不断塞入气泡数据的情况： import React, { useEffect, useState } from"react"; import

3.6K1 0

Ant Design X专为 AI 应用设计的 UI 框架，正式发布！

install @ant-design/x --save原子组件我们基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 对话应用：通用: Bubble - 消息气泡...欢迎、Prompts - 提示集表达: Sender - 发送框、Attachment - 附件、Suggestion - 快捷指令确认: ThoughtChain - 思维链Bubble - 消息气泡...: }} /> );};export default App;Sender - 发送框基础示例，Sender还支持loading状态、语音输入...、粘贴图片等等import React, { useState } from 'react';import '..../index.css';import { Sender } from '@ant-design/x';import { App, Flex } from 'antd';const Demo: React.FC

3.5K2 0

在外部网站中嵌入Vue 组件

有时，我们在网页上也看到了一个“聊天帮助”按钮，它也是一个小部件。在本文中，我们将尝试制作一个小部件，该小部件将嵌入到使用Vue制作的外部应用程序中。我们也可以使用React。...我们的小部件将是BLAH创建的一个小表格，并将被注入Geeky Glasses的主页中。...我们将按照以下顺序进行开发：外部网页（HTML / CSS）主应用程序（Vue / React）小部件（JavaScript）一....主要应用程式我们将设置一个Vue（或React）项目，这将是BLAH的电子商务网站，并创建一个多步骤表单，允许用户输入其个人和地址详细信息以进行Geeky Glasses的预预订。...JS文件将为小部件指定实际的HTML代码，而CSS文件将为其设置样式。

2.1K2 0

值得一看的小程序 TabBar 创意动画

首先，我们来看几个比较经典的动画效果：气泡动画参考气泡动画的核心点为，几个子按钮按照圆心分布，弹出有先后。 https://codepen.io/0guzhan/pen/YvNmwJ ?...CSS filter 滤镜与 SVG 高斯模糊实现，在 web 端上没有问题，但在真机上小程序上不支持。...效果源码：https://codepen.io/siseer/pen/MBameP 这篇《微信小程序 CSS filter（滤镜）的使用示例[7]》讲了大部分 CSS 滤镜效果，但都是基于微信开发者工具的...那为何不使用 CSS 圆角矩形呢？因为圆弧与直线的连接处要做“过渡”效果的。 ?.../09/adhesive-effect.html 扫描二维码关注我 ● 你不知道的 React Hooks（万字长文，快速入门必备）● UmiJS 中后台项目实践● 【效果高能】你不知道的 Animation

5.7K4 2

前端周刊第439期（2025年11月3日–11月9日）

React 19 的新组件、Remix 的去 React 化改革，也让我们再次意识到：框架的稳定与演化，是一场“无声的性能战争”。...Creating 3D Scroll-Driven Text Animations with CSS and GSAP：结合 CSS 与 GSAP 打造滚动驱动的 3D 文本动画，沉浸感拉满。...Perfectly Pointed Tooltips: All Four Sides：完美实现四向提示气泡，视觉与交互的平衡之道。...The “Most Hated” CSS Feature: tan()：tan() 被称为“最让人讨厌的 CSS 特性”，但其实很有用。...React 专区 Remix 3 ditched React: Should you stick with it?：Remix 3 宣布去 React 化，是否还值得继续使用？

1691 0

QQ设计团队分享：手Q语音消息改版背后的功能设计思路

是否语音消息只能采取这种经典的气泡体验？现有的这些点击播放的语音气泡真的满足了所有用户需求吗？emm…总结一下：发送语音一时爽，接收语音想撞墙。针对这些用户声音，业内已有一些解决方案。...4.2 更合理的气泡长度变化规则-“语音越长，气泡越长，so easy~”气泡越长代表语音越长。但你可能没注意过，其实气泡长度是随着语音时长呈线性变化。...从灰度用户的数据来看，大部分用户的语音时长在10s以内。此时语音气泡较短，十分不易于进行拖拽。所以我们既需要短语音气泡变长，又要保证用户可以感知到气泡始终随着时长增长而变长。...因此该阶段气泡长度随语音时长的增长需要更加明显；[阶段2] 斜率逐渐减小的曲线。此阶段对应的长语音是低频场景，此时气泡长度随语音时长变化的反馈可以适当放缓；[阶段3] 达到气泡长度最大值，不再变化。...那你岂不是没法体验到史上最简洁的QQ页面，也不能发现底部tab小惊喜了？

7221 0

太能打了：小卡也能跑的视觉模型！Gemma 4 本地视觉实测，截图转HTML

* 绿色气泡：右下角或右上角有个小三角。 * 白色气泡：左上角有个小三角。...* *气泡:* 使用 CSS `clip-path` 或者简单的 `border` hack 来画气泡尾巴。为了保持代码整洁，我使用简单的 `border-radius` 和伪元素来画尾巴。...仔细看气泡图，它是灰色的背景上叠了两个气泡。让我们开始写代码。...4.5 Gemma 4 的其他几个小模型这里我也测试了 Gemma 4 的其他几个小模型（E2B、E4B），它们的视觉能力和速度表现都不如 26B A4B 版本，尤其是 E 系列的小模型，虽然支持音频输入...小模型欠缺的到底是什么我们看到的设计效果只是表象，那么对于 Gemma 4 的小模型（E2B、E4B）来说，欠缺的到底是什么呢？

2.6K1 0

手把手教你用 Driver.js 搞定“新手引导”

如果你是Vue/React等工程化项目，推荐通过包管理器安装。...，popover.side属性决定了气泡弹出的方向。...这在复杂的页面布局中非常重要，因为我们要避免气泡挡住重要的操作区域。...Driver.js生成的DOM都在body根目录下，我们可以通过全局CSS来覆盖它。...你可以在项目的全局样式文件（如global.css或App.vue的）中添加以下代码：展开代码语言：CSSAI代码解释/*修改引导气泡的背景和圆角*/.driver-popover.driverjs-theme

5391 0

如何使用SVG动画来制作游戏

上时，整个画面就看起来特别小，当然在iPhone?又会显得特别大。我真心地希望可以有一把适配所有设备的“万能钥匙”。...柱子动画每一个柱子里都有一些会动的小元素，这些小元素仅仅是由HTML和CSS制作出来的。使用SASS可以节省很多时间和代码量（通常情况下是这样的）。...在CSS中创造三角形需要很多的代码，所以mixin就派上了大用场。...气泡的动画我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素，并且可以让每个气泡有一个小小的延时，让他们不会同时开始运动。...专业技巧四步实现React页面过渡动画效果让你分分钟理解 JavaScript 闭包 ---- ---- 小手一抖，资料全有。

3.8K3 0

中奖名单

感谢大家的支持，以下为活动留言点赞获奖名单，请在后台联系小编，留言你的企业微信号或微信号，以便奖品发放，谢谢大家的支持！...64 抽筋小陀螺气泡狗 65 严路气泡狗 66 Qing 气泡狗 67 myron 气泡狗 68 邓楠气泡狗 69 Victor+ 气泡狗 70 B.H Xu 气泡狗 71 async 气泡狗...'); var head = document.getElementsByTagName('head')[0]; link.rel = 'stylesheet'; link.type = 'text/css...'; link.href = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg_new/winwx45ba31.css"; head.appendChild...微信扫一扫使用小程序即将打开""小程序取消打开

1K5 0

不写代码，也能做出一个智能问答网页？CodeBuddy IDE 帮我实现了

和 JavaScript（不使用 React/Vue 等框架）。.../style.css"> React + Tailwind + OpenAI 接口问答页面快速调整样式、动效与布局，几乎无需手写 CSS调用 OpenAI API...接下来我计划：将项目接入更多模型（如通义千问、讯飞星火）加入上下文记忆、多轮对话、语音输入等能力尝试用 CodeBuddy 构建更多 AI 原型产品（如知识库问答、智能客服、AI 导购等）如果你也对 AI...总结本项目基于 CodeBuddy IDE 快速搭建了一个支持 OpenAI API 的前端问答助手页面，完整实现了以下目标：使用 React + TailwindCSS 构建简洁 UI支持用户输入、消息展示

2K3 1

前端的培训计划书

二、培训目标培养具有前端初级水平技能的学员，掌握以下知识点：HTML、CSS 基础语法和常用样式技巧；JavaScript 常用语法，函数操作及高级应用；熟练使用 Vue.js 或 React.js 框架开发单页应用程序...下面是一份基础的前端培训计划书：前置学科准备在开始学习前端之前，建议学员具备以下基础知识与技能：计算机基本概念与操作：了解计算机的各部件原理、操作系统、文件系统等；文档编辑器：掌握任意一种文本编辑器，...推荐内容如下：HTML/CSS 基础：介绍常见 HTML 标记和 CSS 样式；JavaScript 基础：引入变量、数据类型、语句、运算符、函数、对象等基础知识点；页面布局：使用 CSS 进行页面布局...React/Vue 框架学习推荐课程内容：ES6/TypeScript 语法：深入阐述新语法在公司开发中程序编写时的优势，并将React/Vue1测其语言特性；React 框架：介绍 React 核心概念和使用方法...模板三以下是一份针对初级前端开发者的培训计划书：前置学科准备在开始学习前端之前，建议学员具备以下基础知识与技能：计算机基本概念与操作：了解计算机的各部件原理、操作系统、文件系统等；文档编辑器：掌握任意一种文本编辑器

1.4K3 0

需要的效果它都有，让AI对话开发效率翻倍！这款Ant Design扩展组件库绝了

项目提供开箱即用的对话式UI组件，支持消息气泡、智能建议、思维链展示等特色功能，特别适合快速搭建智能客服、AI助手类应用。...v-model绑定即可管理对话历史：拟真消息气泡...showIdeas}]"/>技术架构解析技术栈实现功能优势特性Vue3组件化开发更好的TypeScript支持Ant Design基础UI框架设计规范统一Vite构建工具极速HMRTailwind CSS...样式管理原子化CSS方案TypeScript类型系统更好的代码提示典型应用场景智能客服系统：通过Conversations+Sender快速搭建对话界面AI写作助手：利用Suggestion实现智能写作建议数据分析看板...完美兼容现有Ant Design Vue项目企业级交互体验：内置20+种交互动画和状态管理持续迭代保障：每月更新2-3个AI相关新组件同类优秀项目推荐ChatUI（阿里巴巴开源的对话解决方案）Botonic（React

1.5K1 0

组件化——前端编程的选择

一、前端为什么要做组件化在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性...针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。...就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。...当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。...基于此，我们的前端使用的是Facebook的React技术，React的核心是使用组件定义界面的表现，它突出的就是开发组件化。如下图所示，界面上的任何表现都对应着组件。

2.3K8 0

WEB前端工具推荐丨分享6个热门颜色选择器组件

可以通过 CSS 定义其实际尺寸和布局。通过这种方式，该组件非常适合响应式布局。与那里的许多其他颜色选择器不同，colorjoe 是真正可扩展的。它基于 CSS，不依赖于外部图像。...从本质上讲，这意味着您将能够使用一些 CSS 定义其实际尺寸和布局。通过这种方式，小部件非常适合响应式布局。此外，由于它提供的简单 API，实现缺失的功能（RGB 字段等）相对容易。.../colorjoe.css到您的页面或从 src/使用 AMD 。...轻小13 倍）。...所有 iro.js 都可以从单个脚本运行 - 不需要额外的 CSS、图像或第三方库！

3.4K2 0

图解小程序的特征与架构，及其应用机制

下载安装小程序包后，小程序所需的所有静态资源（即页面模板、CSS、JavaScript文件等文档）都会持久存在于用户的设备上。在下次更新之前，这些资源始终可用，无需任何冗余下载。...为了在搜索和执行时定位特定的小程序，小程序必须在平台上具有包名或标识符。小程序小部件除了小程序页面，小程序还可以显示为信息片段或小程序小部件。...所以，除了所有的 app 调用路径外，小部件还可以在不同的场景下通过不同的方法触发，比如文本关键词、语音分析、图片识别、扫码等。一个实例，多个入口：全局性有多个入口可以发现、打开和访问小程序。...小程序的入口包括但不限于如下几种：小程序应用市场（如：支付宝小程序应用市场、百度、快应用、360、PWA）搜索引擎智能助手二维码扫描浏览器 AI 语音 … 性能和用户体验小程序试图通过一些实践来证明是存在有效的机制来提高它们的性能和用户体验的...小程序应用商店支付宝小程序：支付宝小程序运行在支付宝原生应用之上，是Web和原生的混合解决方案。支付宝小程序依赖于 CSS 和 JavaScript 等 Web 技术。

3.2K1 0

【CodeBuddy篇】开启卷王模式！一周直接干了一个全网最全工具箱！

minimax/gpt等厂商自定义模型,以及硅基流动的免费券 https://cloud.siliconflow.cn/i/Hwg3z28c 一、项开发初衷及概述牛马AI工具箱是一款基于 Tauri + React...+ TypeScript + Tailwind CSS 构建的桌面端工具箱应用。...2.2 仿豆包风格的聊天界面 AI 助手采用了时下流行的融合式输入设计：顶部：渐变色 AI 头像 + "你好，我是 AI 助手" 的欢迎语中部：智能对话气泡，用户消息采用蓝紫渐变背景，AI 回复采用卡片式背景...生活工具大全地理查询身份证分析、汇率查询、快递查询、车牌归属、历史今天实用信息查询趣味工具石头剪刀布、决策助手、红包模拟、赛博木鱼、舒尔特方格解压放松必备音视频处理 M3U8 下载、文字转语音...19 最新版 React，享受最新特性和性能优化 TypeScript 全项目 TypeScript，类型安全有保障 Tailwind CSS 原子化 CSS，快速构建响应式界面 Vite 极速的开发服务器和构建工具

2211 0

「沙里淘金」精选浏览器端JavaScript库资源推荐

react-native - 使用React构建本机应用程序的框架。 riot - 类似React的库，但体积非常小。 thorax - 加强你的骨干。...语音控制 annyang - 一个JavaScript库，用于使用语音识别向您的站点添加语音命令。 voix.js - 一个JavaScript库，用于为您的网站，应用或游戏添加语音命令。...文件上传器 jQuery-File-Upload - 文件上传小部件，包含多个文件选择，拖放支持，进度条，验证和预览图像，jQuery的音频和视频。...photobooth-js - 一个小部件，允许用户在您的网站上拍摄他们的头像。...一个快乐的小jquery插件，以隐藏您的网站上的剧透。

9.7K2 0

点击加载更多

点滴匠心，声入人心

QQ 8.0改版策划故事

React 轮播动画探索

Ant Design X专为 AI 应用设计的 UI 框架，正式发布！

在外部网站中嵌入Vue 组件

值得一看的小程序 TabBar 创意动画

前端周刊第439期（2025年11月3日–11月9日）

QQ设计团队分享：手Q语音消息改版背后的功能设计思路

太能打了：小卡也能跑的视觉模型！Gemma 4 本地视觉实测，截图转HTML

手把手教你用 Driver.js 搞定“新手引导”

如何使用SVG动画来制作游戏

中奖名单

不写代码，也能做出一个智能问答网页？CodeBuddy IDE 帮我实现了

前端的培训计划书

需要的效果它都有，让AI对话开发效率翻倍！这款Ant Design扩展组件库绝了

组件化——前端编程的选择

WEB前端工具推荐丨分享6个热门颜色选择器组件

图解小程序的特征与架构，及其应用机制

【CodeBuddy篇】开启卷王模式！一周直接干了一个全网最全工具箱！

「沙里淘金」精选浏览器端JavaScript库资源推荐

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐