页面，并且切换到另外一个仓库进行操作。当用户重新回到第一个打开的页面时，为了防止用户错误操作数据（前端界面是一致的，可能忘记了自己切换过仓库），通过弹窗提醒用户你已经切换过仓库；某音乐播放器

世界，运用的已经非常少了。那么除了浮动，还有没有其它有意思的解法？本文我们将一起来探究探究。方法一：借助最新的容器查询第一种方法，非常简单，但是对兼容性有所要求。那就是使用容器查询

config);}observeElementChanges(targetElement);上面的代码，阅读起来需要一点点时间。但是其本质是非常好理解的，我大致将其核心步骤列举一下：创建一个

的内联元素内，我们同样可以实现多个不同的随机颜色。利用这个技巧，一样可以实现单个平面下的随机文字随机颜色效果：剩余的技巧都是相同的，这里就不再赘述，此技巧的完整代码，你可以戳这里：CodePen

https://developer.mozilla.org/en-US/docs/Web/API/Event/target[3]CodePen

链接在下方参考资料)实现立体效果有了上面的立方体和单个平面的效果，要实现立体效果就不难了。我们尝试将两者结合起来。改造原有的立方体结构，大致改成如下形式：.perspective

https://juejin.cn/post/7224903881729720380?searchId=2023082117561558870BC0CEBB37C57E03[2]

下的不同表现。什么意思呢？区别很明显，块级元素的背景整体是一个渐变整体，而内联元素的每一行都是会有不一样的效果，整体连起来串联成一个整体。当然这个是最基础的，巧妙的运用

RGBA）。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。内存占用：图片对内存资源的占用兼容性：影响图片格式能否大规模推广的核心要素之一WebP

https://www.w3.org/WAI/tutorials/images/textual/[11]复杂图像：为了传达数据或详细信息，提供与图像中提供的数据或信息等效的完整文本作为替代文本。:

之后，注意观察页面的滚动条及滚动效果：可以看到滚动条在向下滚动在不断的抽搐，这是由于下面不在可视区域内的内容，一开始是没有被渲染的，在每次滚动的过程中，才逐渐渲染，以此来提升性能。Codepen

特性：aspect-ratio：控制容器的宽高比，避免产生布局偏移及抖动object-fit：设定内容应该如何适应到其使用高度和宽度确定的框，避免图片拉伸object-position：基于

表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt。设备像素

图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。图片类型的选取及

实现六边形。这里的核心在于上下两个三角形叠加中间一个矩形。这里，利用元素的两个伪元素实现上下两个三角形，从而让这个元素看起来像一个六边形。思路比较简单，直接上代码：.hexagon

制作波浪效果的思路[6]圆角大杀器，使用滤镜构建圆角及波浪效果！[7]是的，大部分时候，我们都是利用一些奇技淫巧实现波浪效果，像是这样：如今，有了

url(https://tvax4.sinaimg.cn/large/6f8a2832gy1g8npte0txnj21jk13a4qr.jpg);}效果如下：当然，我们的目标是利用

块呢？还要手写这些代码吗？当然不需要，由于上面的代码的规律非常的明显，我们可以借助预处理器很好的封装整个效果。从而快速的实现切割成任意规则块数的效果。完整的代码如下：$count:

大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行

的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。当然，仅仅从用更少的标签完成这个布局的角度而言，我们能够把标签数压缩到多少呢个？（不考虑

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries[2]CodePen

点击事件，是可以冒泡传给父元素的，这样每次子元素被点击，我们都可以放大一次点赞按钮，用于实现点击反馈。稍微修改一下缓动函数，让整体效果更为均衡合理这样，我们就得到了题图一开始的效果，利用纯

本文将探讨一下，在多行文本情形下的一些有意思的文字动效。多行文本，相对于单行文本，场景会复杂一些，但是在实际业务中，多行文本也是非常之多的，但是其效果处理比起单行文本会更困难。单行与多行文本的渐隐首先，我们来看这样一个例子，我们要实现这样一个单行文本的渐隐：使用

本身，语言本身（NodeJS）的执行效率是没法优化的，只能在其他几个点做文章。因此在最早期，我们所做的都是一些比较常规的优化手段，这里简单介绍最为核心的几个：缓存多进程寻址优化缓存优化其实对于

订阅收藏。如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。参考资料[1]神奇的滤镜！巧妙实现内凹的平滑圆角:

1：注意，这里最为核心的在于，图片中的白色不是白色，是透明的，可以透出背景的内容。这样，我们只需要在这张图片的背后，放置另外这样一张图片：想到了吗？没错，就是让这张图片从一个较大的

图，灰色部分透明。随着需求的进行，在某一处，我们需要一张基于上述图形的反向镂空图形：emmm，要注意，这里白色处是需要透明的，要能透出不同的背景色，像是这样：怎么办呢，通常而言，只能是找

订阅收藏。如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。参考资料[1]CodePen

处理长文本、长列表的时候。在滚动页面的过程中，滚动条一直在抖动，这不是一个很好的体验。当然，这也是许多虚拟列表都会存在的一些问题。好在，规范制定者也发现了这个问题。这里我们可以使用另外一个

转场[6]这个技巧，在张鑫旭的这篇文章里，有更多丰富的例子，可以移步阅读：你用的那些CSS转场动画可以换一换了[7]运用这个技巧，我们就可以实现很多有意思的图片效果。像是这样：mask

启动为开发者提供了一种在浏览器中进行编辑的简便方法。网页设计博物馆保留网页设计的历史。https://www.webdesignmuseum.org/Photopea由一个人开发的

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#shape_functions[9]Reference

中的一个示意效果backdrop-filter是让当前元素所在区域后面的内容模糊，要想看到效果，需要元素本身半透明或者完全透明；而filter是让当前元素自身模糊。有兴趣的可以查看这篇文章：CSS

最近几天，有好几个同学都问了同样一个问题。页面上有一段文本，能否实现这段文本在不同背景色下展示不同的颜色？也就是俗称的智能变色。像是下面这样：文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在

16%);}渐变图案中心镂空一个矩形但是，对于中间是一个矩形的话，就不太好办了，我们需要基于渐变图案实现这样一个图形：方法其实也有很多，譬如我们把中间透明部分想象成一个

https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage[5]animation-duration:

一文中介绍的边框动画，非常的类似：其核心就是利用了角向渐变（conic-gradient），然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。然而，这个三角形动画里有两个难点：整个图形是个三角形在

效果，都是运用了类似技巧：简单的说就是，我们看到的动画只是原本现象的一小部分，通过特定的裁剪、透明度的变化、遮罩等，让我们最后只看到了原本现象的一部分。border-image

url('https://github.com/iamalperen/playground/blob/main/SpriteSheetAnimation/sprite.png?raw=true');

实现下面，是本文的重点，将介绍一种利用滤镜实现该效果的方式。一听到滤镜，你可能会比较诧异，啊？这个效果好像和滤镜应该扯不上什么关系吧？下面，就是见证奇迹的时刻。首先，我们只需要实现这样一个图形：

linear-gradinet、radial-gradient、conic-gradient）都是不支持过渡变换的。所以，在这里，为了实现动画效果，我们可以借助

#000);}我们将得到可见部分图案的多重阴影叠加效果：我们将上述例子的黑白颜色对换一下，就能得到一副很有意境的图案，像是在深邃的太空中看某个透光的星球般：CodePen

https://csscoco.com/inspiration/#/./blendmode/mixblend-text-wave-effectiCSS，不止于

设置了一个渐隐渐现的动画效果，方便示意：借助伪元素，显示拖拽条最后一步，由于完全隐藏了滚动条，用户也就不知道可以拖拽了，所以我们还需要绘制一个更为好看的拖拽条，这里延续上述的布局，给

全局统一处理，当开启配置时，用于实现类似这样的功能：那为什么需要调整页面的对比度呢？此举是为了让一些视觉障碍的用户有更好的体验，这里补充一些对比度可访问性相关的知识。内容取自我的这篇文章

实现的波浪效果，思路非常有意思。从定积分实现曲边三角形面积说起在进入主题之前，先看看这个，在高等数学中，我们可以通过定积分求二次函数曲边图形面积。我们可以将曲线下的面积分割成

确实可以通过一种讨巧的方式，近似的获取到图片的主色调，在对主色的要求不是特别精确的情况下，不失为一种办法，下面一起来一探究竟。

Agent，此元素的子元素不会在此元素的边界之外被展示，因此，如果元素不在屏幕上或以其他方式设定为不可见，则还可以保证其后代不可见不被渲染。

进行引用syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型inherits：是否允许继承initial-value：初始值其中，@property

个属性的的缩写。其中：text-decoration-line：控制用于设置元素中的文本的修饰类型，是在文本下方、上方还是贯穿文本text-decoration-style：不仅仅是实线