腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Coco的专栏

专栏作者

253

文章

279653

阅读量

45

订阅数

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

布局 class ddd nav shadow

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

2024-04-19

620

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

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

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

2024-02-28

650

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

事件 element 变量动画动效

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

2024-01-23

1560

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

解决方案语法 css 变量函数

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

2024-01-09

2850

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

css 开源 background 工具基础

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

2023-12-14

2080

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

容器 flex 布局技巧兼容性

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

2023-12-08

2200

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

浏览器实践数据通信原理

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

2023-11-29

3940

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

css 容器布局函数兼容性

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

2023-11-15

2480

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

前端事件数据数组异常

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

2023-11-09

2130

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

background 动画函数技巧标签

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

2023-11-01

3310

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

css class 编译动画函数

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

2023-10-23

2290

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

button event mask 技巧事件

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

2023-10-23

2440

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

css animation offset path 动画

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

2023-09-15

3680

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

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

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

2023-09-12

2510

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

css 动画函数解决方案数学

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

2023-09-06

2560

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

css animation transform 动画原理

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

2023-08-25

1970

抢先体验！超强的 Anchor Positioning 锚点定位

anchor positioning target 兼容性语法

本文，将向大家介绍 CSS 规范中，最新的 Anchor Positioning，翻译为锚点定位。

2023-08-16

2370

【动画进阶】有意思的网格下落渐次加载效果

flex 布局动画函数调试

点击某个按钮后，触发一个动画效果，原本的网格内容，将按顺序（又带点随机的效果）从高处下落进行加载填充动画。

2023-07-24

1880

单标签下的日间/黑夜模式切换按钮效果

background gradient height shadow transparent

想必很多同学都看到这张图，是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。

2023-07-10

2520

现代 CSS 解决方案：CSS 原生支持的三角函数

css 动画函数解决方案数学

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如

2023-05-27

3550

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

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

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

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

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