CSS 实现3d轮播图的一些思路

7 月 4 日
阅读 8 分钟
277
原效果是通过vue的transition组件实现的,感觉有些笨重,思考了一番,发现纯 CSS也能实现这样的效果,而且性能更好,实现也能简洁,一起来看看吧
封面图

纯 CSS 检测滚动的速度和方向

6 月 28 日
阅读 7 分钟
355
我们经常会碰到这样的场景,很多网页会在右下角放一个固定入口,有可能是返回顶部,有可能广告,为了避免干扰,在页面滚动时,会把这些入口临时收起来,停止滚动后再出现,就像这样
封面图

让路径动画更好用!CSS offset-path现在也支持基本形状了

6 月 13 日
阅读 10 分钟
583
欢迎关注我的公众号:前端侦探大家有使用过offset-path吗?没用过不要紧,相信大家都见过这种酷炫的路径动画,这种就可以用offset-path来实现demo 来源:[链接]随着 CSS的不断发展,最近在Chrome 116中,offset-path也支持基本形状了,也就是常见的inset、circle、polygon等等,有了这些形状的支持,路径动画写起来更加...
封面图

CSS实现卷轴滚动效果

5 月 28 日
阅读 6 分钟
405
庆余年2 马上就要开播了~最近起点读书APP内上架了庆余年典藏书,最大的特色是里面新加入了全新的阅读皮肤,一个拟物化的卷轴滚动效果,效果如下
封面图

CSS 实现从上到下从左到右的列表布局

5 月 23 日
阅读 3 分钟
493
正常情况下,网页中的列表都是从左到右,从上到下的,如下但有时候可能需要从上到下,从左到右的排列方式,就像这样其实这种排序更符合日常生活中的排列方式。虽然在网页中不常见,但如果真的碰到了这种布局,该如何处理呢?有些同学可能会想到用 JS将元素数组分成三份,做成一个二维数组,然后每个数组嵌套一层容器水平...
封面图

不一样的SVG!SVG在CSS背景平铺中的应用

5 月 16 日
阅读 12 分钟
410
欢迎关注我的公众号:前端侦探再次介绍一些你可能没用过的SVG小技巧。有时候会遇到一些完全相同的图形,如果能用上 CSS背景平铺,那就再合适不过了。举个例子,有这样一个按钮相比普通的按钮,多个左右两个小装饰,如果是你,会怎样实现呢?假设这个小图标是a.svg,想了一下,应该有以下几种方式1.伪元素刚好用上::befor...
封面图

纯 CSS 实现标签自动显示超出数量

5 月 8 日
阅读 6 分钟
904
欢迎关注我的公众号: 前端侦探现代 CSS 强大的令人难以置信。这次我们来用 CSS 实现这样一个功能:有多个宽度不同的标签水平排列,当外层宽度不足时,会提示超出的数量,演示效果如下如果让我用 JavaScript来实现估计都有点折腾,毕竟宽度都是动态的,要监听各部分的尺寸变化,包括标签的位置和外层的宽度,总之不是一两...
封面图

纯 CSS 检测文本是否溢出

4 月 28 日
阅读 8 分钟
1k
由于无法直接CSS判断,这使得不得不借助 JavaScript或者CSS奇技淫巧来实现,之前提到了不下于3种不同的思路来解决这个问题,在以下这些文章中都有提到
封面图

CSS align-content也能适用于普通容器了

4 月 22 日
阅读 3 分钟
239
最近,Chrome 123又悄悄推出了一个CSS新特性,那就是align-content支持普通的block容器了!那么,这个特性有什么用呢?一起来了解一下吧
封面图

不一样的SVG!SVG 渐变边框在 CSS 中的应用

4 月 10 日
阅读 11 分钟
1k
介绍一些你可能没用过的SVG小技巧。在平时开发中,很多时候都会用到SVG。大部分情况我们都不必关注SVG里面到底是什么,直接当成图片资源引入就行,比如常见的图标资源我们可以通过多种方式使用这个特殊的图片 {代码...} {代码...} 甚至直接放到HTML中 {代码...} 这些都没什么问题,但有时候,我们需要的是可以自适应尺寸...
封面图

快速了解CSS表单尺寸属性field-sizing

3 月 25 日
阅读 2 分钟
415
最近Chrome 123又推出了一个新的 CSS 属性:field-sizing。有了它,可以轻松实现输入框尺寸自动跟随输入内容的效果,花一分钟了解一下吧~
封面图

CSS 实现居左到居右过渡变化的一些思路

3 月 18 日
阅读 3 分钟
521
欢迎关注我的公众号:前端侦探介绍一些看似简单又不是那么容易的过渡小技巧。很多 CSS 属性其实是不支持过渡变化的,例如flex中的对齐 {代码...} 或者是文本对齐 {代码...} 这样属性在变化时是没有过渡动画的,但有时又需要这样的动效,比如下面这个效果有人会觉得这不就是一个普通的位移动画吗,给个固定位移不就可以了...
封面图

快速了解:user-valid和:user-invalid

3 月 5 日
阅读 2 分钟
394
最近,Chrome 119 终于正式对:user-valid和:user-invalid这两个验证伪类进行了支持至此,现代浏览器总算是全面支持了。看名称,似乎和:valid和:invalid有点相似,那么有什么区别呢?快速了解一下吧一、:valid 和 :invalid 的缺陷大家可能或多或少都用过或者见过这两个伪类,这里简单介绍一下这两个都是做表单验证的,当...
封面图

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

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

CSS 和 SVG 实现彩色图片阴影

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

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

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

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

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

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

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

妙用 CSS counters 实现逐层缩进

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

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

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

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

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

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

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

CSS 中 rgb 与 rgba 的进化史

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

快速了解 CSS @starting-style 规则

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

原生“跨组件”通信方式

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

快速了解CSS 相对颜色

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

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

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

CSS 实现自适应导航栏

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

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

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

CSS mask 与 切图艺术

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