Coco的专栏-腾讯云开发者社区

开发者社区

文档建议反馈控制台

腾讯云架构师技术同盟

文章/答案/技术大牛

发布

Coco的专栏

专栏成员

257

文章

321819

阅读量

46

订阅数

【动画进阶】类 ChatGpt 多行文本打字效果

chatgpt display 动画字符串 background

这个效果其实本身并非特别困难，实现的方式也很多，在本文中，我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。

2024-07-02

2570

【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width

css scrollbar width 操作系统系统

Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。

2024-06-13

9440

【动画进阶】极具创意的鼠标交互动画

target 动画事件指针 cursor

思索了一番，觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。

2024-05-12

2710

【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画

css svg transparent 动画技巧

简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。

2024-05-07

8530

【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果

布局 class ddd nav shadow

最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果：

2024-04-19

1230

现代 CSS 解决方案：accent-color 强调色

解决方案浏览器 css 表单代理

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。

2024-02-28

1300

【动画进阶】神奇的 3D 卡片反光闪烁动效

事件 element 变量动画动效

最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- key-drop，效果如下：

2024-01-23

3410

现代 CSS 解决方案：文字颜色自动适配背景色！

解决方案语法 css 变量函数

其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。

2024-01-09

8670

带圆角的虚线边框？CSS 不在话下

css 开源 background 工具基础

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：

2023-12-14

4010

【布局技巧】Flex 布局下居中溢出滚动截断问题

容器 flex 布局技巧兼容性

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样：

2023-12-08

5070

浏览器跨 Tab 窗口通信原理及应用实践

浏览器实践数据通信原理

代码不多，核心代码 200 行，感兴趣的可以戳这里：Github - broadcastAnimation

2023-11-29

8770

CSS 也能实现 if 判断？实现动态高度下的不同样式展现

css 容器布局函数兼容性

这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？

2023-11-15

4250

前端如何防止数据被异常篡改并且复原数据

前端事件数据数组异常

所以，最近在做这么一个谷歌扩展插件 chrome-extension-text-formatting，通过谷歌扩展，快速将选中文本，格式化为符合中文文案排版指北的文本。

2023-11-09

3460

【动画进阶】单标签下多色块随机文字随机颜色动画

background 动画函数技巧标签

在 CSS 还原拉斯维加斯球数字动画 - 掘金一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：

2023-11-01

4340

CSS 还原拉斯维加斯球数字动画

css class 编译动画函数

实现一个 3D 立方体，相对另外一个文字和颜色都在随机变化的平面效果而言，属于非常非常简单的一步了。

2023-10-23

3170

小技巧 | 渐变消失遮罩的多种实现方式

button event mask 技巧事件

题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。

2023-10-23

4600

【动画进阶】当路径动画遇到滚动驱动！

css animation offset path 动画

在一年前，我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline：革命性创新，动画杀手锏 @scroll-timeline。

2023-09-15

6100

现代 CSS 解决方案：原生嵌套（Nesting）

css 容器解决方案语法作用域

很早之前，就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的规范！

2023-09-12

4940

现代 CSS 解决方案：数学函数 Round

css 动画函数解决方案数学

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如在现代 CSS 解决方案：CSS 数学函数一文中，我们详细介绍了

2023-09-06

4000

震惊！CSS 也能实现碰撞检测？

css animation transform 动画原理

我们只实现了，小球与边界之间的碰撞反应。不过这里，也并非碰撞检测，我们只需要设置好单个方向的运动动画，并且设置 animation-direction: alternate; 即可！

2023-08-25

3180

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态