CSS 也能实现 if 判断？实现动态高度下的不同样式展现
今天在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反...
最新发布 第2页
lee1214
50 个实用前端 JavaScript/CSS 代码片段
在前端开发中，我们经常会遇到一些重复性的问题，本文整理了 50 个高频且实用的 JavaScript 和 CSS 代码片段，涵盖设备判断、事件监听、操作 DOM、处理数据等多个方面，助你提升开发效率。 1. 判断是否为移动端 2. 获取元素...
设计师看懵，程序员却上头：CSS 函数有多强？~(颜色篇)
CSS，不再只是“样式表” 大多数人第一次接触 CSS 的时候，都会觉得它是“被动的”：给元素设定颜色、大小、位置—就像在调一张图 但随着它的发展，现在的 CSS，早已变得可计算、可逻辑、可表达动态关系；函数正是这种变化的核心之一 从最早的...
使用纯 CSS 实现超酷炫的粘性气泡效果
最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。 其源代码在：CodePen Demo — Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可...
文字轮播与图片轮播？CSS 不在话下
今天，分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样： 看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？ 我们来简单分析分析，从表面上看，确实好像只有元素的 tran...
现代 CSS 解决方案：accent-color 强调色
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。 简单而言，CSS accent-color 支持...
现代 CSS 解决方案：文字颜色自动适配背景色
在 23 年的 CSS 新特性中，有一个非常重要的功能更新 — 相对颜色。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。 其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速...
现代 CSS 解决方案：原生嵌套（Nesting）
之前看过一篇与原生嵌套相关的文章 — CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS ...
现代 CSS 解决方案：CSS 数学函数
在 CSS 中，其实存在各种各样的函数。具体分为： 本文，将具体介绍其中的 CSS 数学函数（Math functions）中，已经被浏览器大规模支持的 4 个： 为什么说是被浏览器大规模支持的？因为除了这 4 个目前已经得到大规模支持的数...
现代 CSS 解决方案：Modern CSS Reset
看过几篇关于 CSS Reset 的文章 – reset.css 知多少。 详细描述了当时业界比较常用的，两个 CSS reset 方案：reset.css 与 Normalize.css。 以更为推荐的 Normalize.c...
