查漏补缺,盘点和toggle相关的几个API

今天 10:00
阅读 3 分钟
58
欢迎关注我的公众号:前端侦探toggle的意思很简单,表示“切换”,适用于两个状态之间的变化,不会出现第三者,就像这样web 中也有很多类似的api,一起看看有哪些吧一、toggle首先是最常用的DOMTokenList.toggle方法,这里的的DOMTokenList表示一组空格分隔的标记,最常见的就是Element.classList,比如除了classList还有r...
封面图

CSS 和 SVG 实现彩色图片阴影

1 月 30 日
阅读 3 分钟
1k
在平时开发中,有时候会碰到这样的彩色阴影,效果如下是不是非常有质感?下面分布介绍 CSS 和 SVG 两种实现方式,一起看看吧一、实现原理从设计上看,其实原理很简单,一张原图和一张模糊的图,叠加在一起就行了,示意如下那么具体如何实现呢?接着往下看二、CSS 滤镜首先,单纯的 CSS并不能直接做出这种效果,毕竟无法...

CSS 滚动驱动动画实现圆弧滚动条

1 月 22 日
阅读 6 分钟
774
欢迎关注我的公众号:前端侦探前不久看到这样一个很有趣的效果,它的滚动条是沿着圆角边缘滚动的,效果如下你可以查看原链接来体验一下[链接]这是如何实现的呢?原效果中由于为了兼容不支持CSS滚动驱动的浏览器,特意用 JS做了兼容,所以看着比较复杂,其实核心非常简单,下面我将用最简短的 CSS 来复刻这一效果,一起看...
封面图

dom 获取不到?试试 CSS 动画监听元素渲染吧

1 月 15 日
阅读 7 分钟
722
在数据驱动视图的框架下,你最头疼的事情是什么?没错,就是获取dom。大部分业务逻辑都可以在数据层面进行处理,但有些情况就不得不去获取真实的dom,比如获取元素的宽高
封面图

原生details支持手风琴模式了!

1 月 8 日
阅读 5 分钟
780
欢迎关注我的公众号:前端侦探最近details元素新增了一个name属性,如下别看这只是一个普普通通的属性,这可是带来了一个全新的模式,一起了解一下吧一、快速了解 details有些同学可能从来没有用过details这个标签,这里简单介绍一下。details通常和summary配合使用,天然支持展开收起的效果。例如 {代码...} 效果如下虽...
封面图

妙用 CSS counters 实现逐层缩进

2023-12-25
阅读 4 分钟
616
欢迎关注我的公众号:前端侦探之前使用纯 CSS 实现了一个树形结构,效果如下其中,展开收起是用到了原生标签details和summary,有兴趣的可以回顾之前这篇文章CSS 实现树状结构目录还有一点,树形结构是逐层缩进的,是使用内边距实现的,但是这样会有点击范围的问题,层级越深,点击范围越小,如下之前的方案是用绝对定位...
封面图

尝试借助CSS @container实现多行文本展开收起

2023-12-18
阅读 6 分钟
693
欢迎关注我的公众号:前端侦探之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,非常巧妙,有兴趣的可以回顾一下不过展开收起按钮的隐藏和显示采用了“障眼法”,也就是通过一个伪元素设置和背景相同的颜色覆盖实现的,如下时代在进步,CSS也在不断发展。 CSS 容器查询...
封面图

了解一下全新进化的CSS linear缓冲函数

2023-12-11
阅读 14 分钟
778
欢迎关注我的公众号:前端侦探现实生活中,物体并不是突然启动或者停止, 当然也不可能一直保持匀速移动。就像我们 打开抽屉的过程那样,刚开始拉的那一下动作很快, 但是当抽屉被拉出来之后我们会不自觉的放慢动作。 或是掉落在地板上的物体,一开始下降的速度很快, 接着就会在地板上来回反弹直到停止
封面图

CSS 实现弧形卡片的 3 种方式

2023-12-04
阅读 3 分钟
908
欢迎关注我的公众号:前端侦探在平时开发中,有时候会碰到下面这种“弧形”样式,主要分为“内凹”和“外凸”两种类型,如下该如何实现呢?或者想一下,有哪些 CSS 属性和“弧形”有关?下面介绍 3 种方式,一起看看吧一、border-radius通常情况下,我们用border-radius都是这样 {代码...} 这样表示 4 个角都是圆角,并且是标准...
封面图

CSS 中 rgb 与 rgba 的进化史

2023-11-27
阅读 3 分钟
505
提到颜色,大家都能想到 rgb 颜色表示法,比如 rgb(255,0,0)就表示红色,如果希望有透明度,可以用rgba来表示,比如rgba(255,0,0,.5)就表示透明度为50%的红色。
封面图

快速了解 CSS @starting-style 规则

2023-11-20
阅读 4 分钟
658
最近 Chrome 117,CSS 又悄悄推出了一个新的的@规则,叫做@starting-style。从名称上来看,表示定义初始样式。那么,具体是做什么的?有什么用?一起了解一下吧
封面图

原生“跨组件”通信方式

2023-11-13
阅读 4 分钟
752
相信大家平时在vue或者react中都碰到过“跨组件”通信的需求,通常我们需要将数据放在一个公共的父级上,然后用context之类的方式传递下去,或者借用pinia这样的开源库去更好的管理这些数据。
封面图

快速了解CSS 相对颜色

2023-11-06
阅读 4 分钟
841
欢迎关注我的公众号:前端侦探在正式开始介绍之前,可以先想一个问题:如何动态去改变一个颜色的透明度?比如一个颜色 {代码...} 如何将它变成透明度为 50% 的红色呢?其实在之前这几篇文章中都有提到过一些颜色混合方法,有兴趣的可以回顾一下深入了解CSS颜色混合函数color-mixCSS 颜色混合的N种方式妙用 CSS 动画来实...
封面图

使用 CSS columns 布局来实现自动分组布局

2023-10-30
阅读 5 分钟
847
最近在项目中碰到这样一个布局,有一个列表,先按照 4 2 的正常顺序排列,当超过 8 个后,会横向重新开始 4 2 的布局,有点像一个个独立的分组,然后水平排列,如下
封面图

CSS 实现自适应导航栏

2023-10-23
阅读 3 分钟
897
值得注意的是,右侧的工具栏是不固定的,有可能有多个,也有可能没有,并且中间的标题是整体居中的,如果标题过长,还能出现省略号,各种适应场景如下
封面图

CSS魔法!如何将任意CSS类型转换为数值?

2023-10-16
阅读 5 分钟
708
在 CSS 中有各式各样的类型值,例如 1rem、10vw、100cqw等等,这些相对值给与了 CSS 强大的适应能力。但有时候,我们还需要知道这些相对值所对应的真实值,也就是px值,比如在移动端,我们经常会设置这样的根字号:
封面图

CSS mask 与 切图艺术

2023-09-25
阅读 8 分钟
1.2k
相反,有些地方还是更推荐的,特别是那些奇形怪状的 UI,合理的“切图”可以极大地提高布局效率,当然,这里需要一点点技巧,将“切图”和 CSS 现有能力结合起来,一起学习一下吧
封面图

重新学习 scrollIntoView

2023-09-18
阅读 6 分钟
1.6k
欢迎关注我的公众号:前端侦探大家可能都知道 dom 有一个 scrollIntoview方法,它可以轻易的让目标元素滚动到可视范围之内,而无需手动计算偏移量 {代码...} 效果如下这样跳转比较生硬,因此可能还知道有这样一个参数 {代码...} 这样就能平滑滚动了仅仅只有这些了吗?其实还可以做很多一、重新学习 scrollIntoView 语法...
封面图

Google 2023开发者大会简单回顾 - Web 平台新动向

2023-09-17
阅读 4 分钟
699
简单回顾一下 Google 2023 开发者大会(上海)关于 Web 平台的部分。web的优势首先介绍了 Web 的一些优势,以超链接为基石,把所有生态都连接起来,是最开放的平台接下来开始介绍各种新特性WebAssemblyWebAssembly 是一种新的编码方式 ,可以直接运行 C/C++等语言,更接近硬件原生性能。[链接]将浏览器端性能提升 50%支...
封面图

裁剪的3种方式,CSS 如何隐藏移动端的滚动条?

2023-09-11
阅读 4 分钟
3.3k
在移动端开发中,经常会碰到需要横向滚动的场景,例如这样的但很多时候是不需要展示这个滚动条的,也就是这样的效果,如下你可能想到直接设置滚动条样式就可以了,就像这样 {代码...} 目前来看好像没什么问题,但在某些版本的 iOS 上却无效(具体待测试),滚动条仍然出现。那有没有其他方式可以解决这个问题呢?下面介...
封面图

twitter 换新 logo 了,用 CSS 渐变来画一个吧~

2023-08-29
阅读 3 分钟
3.4k
大家可能知道,不久前 twitter 换了一个新 logo,从蓝色小鸟变成了一个 “x”,如下不聊其他的,看看如何用 CSS 渐变来绘制这样一个图形一、 x 的绘制整个 logo 是一个镂空的“x”形状,先不考虑镂空部分,如何绘制实心的“x”呢渐变有 3 种,线性渐变、径向渐变和锥形渐变。很显然,x 可以看成是两端倾斜的线段,用线性渐变就...
封面图

太丝滑了!了解一下原生的视图转换动画 View Transitions

2023-08-21
阅读 10 分钟
5.8k
Android 里一般称之为共享元素(shareElement)动画,也就是动画前后有一个(或多个)相同的元素,起到前后过渡的效果,可以很清楚的看到元素的变化过程,而并不是简单的消失和出现。
封面图

CSS 如何改变网格布局偶数行的排序?

2023-08-14
阅读 6 分钟
3.9k
欢迎关注我的公众号:前端侦探最近在项目中看到这样一个布局,如下布局本身没什么奇怪的,就是 4 * 2 的网格,比较特殊的是第二行布局是从右往左的,整体是一个这样的顺序而这个列表是通过一个数组动态渲染的,可能有很多同学会将这个数组分成两份,然后将第二份进行反向,类似于这样 {代码...} 然后,由于第二行的第一...
封面图

CSS 渐变中的颜色空间和色相插值

2023-08-07
阅读 5 分钟
941
在 CSS 中,我们可以很轻易的实现一个渐变,比如下面是一个从黄色到蓝色的渐变 {代码...} 效果如下有没有发现有什么问题?🤔没错,在黄色和蓝色的中间,出现了灰色,看着整体颜色非常“脏”,也就是设计中常说的 “灰色死亡地带”(gray dead zone)有没有办法规避这种情况呢?这就需要用到今天要介绍的颜色插值算法和色相插...
封面图

借助 input range 实现图片对比功能

2023-07-31
阅读 4 分钟
4k
欢迎关注我的公众号:前端侦探之前在项目中做了一个图片对比的工具,演示如下有一些有趣的小细节,一起看看如何实现的吧一、布局布局比较简单,两张图片上下重叠在一起就行了 {代码...} 这里可以只给第一个图片设置绝对定位,有几个好处第1张图片层级自动就高了第1张图片仍在原处,也无需设置 left、top第1张图片不占空...
封面图

CSS 滚动驱动动画终于正式支持了~

2023-07-24
阅读 11 分钟
5.1k
在最新的Chrome 115中,令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了~有了它,几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了,就是这么强大,一起了解一下吧
封面图

原来 CSS 渐变也可以只用一个颜色

2023-07-17
阅读 4 分钟
3.5k
介绍一些关于 CSS 渐变的小技巧~一、渐变通常至少需要两个颜色值通常情况下,渐变至少需要两个颜色。以linear-gradient线性渐变为例 {代码...} 示意效果如下需要注意的是,即使是纯色的,也就是两个颜色都是相同的,也需要都写上 {代码...} 示意效果如下如果只写一个颜色,就像这样 {代码...} 那么,这条语法将直接不合...
封面图

纯 CSS 实现带连接线的树形组件

2023-07-04
阅读 7 分钟
5.7k
之前在这篇文章(CSS 实现树状结构目录)中实现了一个树状结构,效果是这样的整个实现没有用到任何 JavaScript,非常巧妙,有兴趣可以回顾一下。不过有时候还需要那种带连接线的样式,这样看起来层级会更清晰,就像这样这是如何实现的呢?一起来看看吧~一、details 和 summary简单回顾一下,整体结构需要利用到 details ...
封面图

深入了解CSS颜色混合函数color-mix

2023-06-26
阅读 5 分钟
5.8k
所谓颜色混合,顾名思义,就是将两种颜色按照一定的比例混合起来,和调色板比较像。到目前为止,可以说是最强大、最实用的 CSS 颜色处理函数了,有了它,再也不需要用LESS、SASS等预处理工具了,还可以实现颜色动态更新,一起了解一下吧
封面图

如何理解 CSS step 函数中的 jump-* 关键词?

2023-06-19
阅读 4 分钟
3.7k
欢迎关注我的公众号:前端侦探之前在这篇文章中:CSS 实现 Ant Design官网Logo彩蛋效果实现了一个鼠标 hover 效果,如下原理其实很简单,就是一个 CSS 动画,使用的是steps阶梯函数,不断改变background-position {代码...} 里面用到的小图标是这样一张图片(11个小图标)乍一看,动画好像非常完美,其实还是有一个小小...
封面图