Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 175 followers
Latest posts
Last updated 2 days ago
使用CSS linear()函数实现更逼真的物理动画效果
2 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11841 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、被低估的linear()函数 CSS动画曲线函数新增了一个名为linear()的函数，目前所有现代浏览器都已经支持： 一开始，我以为又是什么缝缝补补的新特性，细细一眼就，发现这东西还是挺强的。 之前的动画缓动函数我们都是使用cubic-bezier()函数，贝塞尔曲线实现的，但是这个函数有个问题，最多就4个属性值，只能实现先快后慢，先慢后快，或者一次性bounce缓动。 但是真实的物理动画往往是复杂的，例如一个皮球落地，他不可能只弹一下，往往要蹦很多下，cubic-bezier()函数就无法模拟。 在这种背景下，就设计了linear()函数，虽然是线性函数，但是参数是无限的，于是我们可以通过枚举的方式，可以模拟任何的运动曲线。 举个例子，小球落地的动画效果。...
@function自定义函数让CSS支持编程啦
13 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11847 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、@function规则来啦 Chrome 139浏览器除了新支持了 CSS if()函数（参见“CSS倒反天罡居然支持if()函数了”一文），还支持了期待已久的@function规则。 @function规则可以让我们自定义运算逻辑，比之前单纯的CSS var()变量要更加强大。...
HTML之快速了解hidden=until-found的作用
20 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11844 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、hidden属性新增新值 任意HTML元素，设置hidden属性后，会隐藏自身（样式没有被重置的前提下）。 可能有些人并不知道，hidden属性还支持一个名为until-found值，他可以让内容隐藏，但是在特殊场景下也会显示。 这个特殊场景包括锚点锚定，或者浏览器层面的文字搜索匹配。 我们开看例子。 如下HTML代码： <div...
抢先学习大开眼界的CSS corner-shape属性
22 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11791 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、大开眼界的CSS效果 先通过几个GIF或静态图看下CSS corner-shape属性可以实现怎样的图形表现效果。 1. 十字形、菱形 2. 六边形...
这个有点屌CSS @container scroll-state容器滚动查询
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11807 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、温故而知新 在学习本文的scroll-state容器滚动查询之前，大家需要先了解CSS @container容器查询。 详见我之前的文章：“介绍2022年最期待的CSS container容器查询”。 这东西可以检测容器尺寸，并进行响应的布局调整，很强大。 现在，@container容器查询，再次进化，可以识别滚动边缘，让CSS的交互能力更上一层楼。...
CSS索引和数量匹配函数sibling-index sibling-count简介
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11804 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、子元素索引值函数sibling-index() sibling-index()在多个有规律子元素构建的图形或动画效果的场景下非常实用。 我们来看一个《CSS新世界》这本书的一个案例，演示下如何使用sibling-index()函数简化我们的实现。 案例 先看原来的实现，可以访问这个地址：https://demo.cssworld.cn/new/5/4-3.php 所要实现的就是音波播放时候的波形上下运动的效果效果，静态截图效果如下所示： 之前的实现代码如下所示，HTML部分：...
HTML popover再进化 – 新增hint类型提示框
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11801 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、关于popover=hint 去年年初有介绍HTML popover属性，详见“该使用原生popover属性模拟下拉了”一文。 可以说是弹出浮层最佳解决方案，自动显隐特性，外加顶层特性，非常香。 但是有一个问题，那就是一次最多只能有一个弹出层显示（如果不使用 showPopover() 方法手动设置的话），但是有些轻提示，仅仅是用做信息展示，可以无需关闭之前的弹出层，之前的popover属性能力就不够。...
CSS倒反天罡居然支持if()函数了
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11788 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、CSS真逻辑函数 CSS之前也支持类逻辑函数，例如数学函数中的min()、max()，本质上也是有逻辑的，例如：max(300px, 100vw)，表示: 如果100vw的计算宽度大于300px，则最终尺寸300px 否则是100vw的宽度。 现在，CSS支持 if()...
JS正则新特性：安全过滤RegExp.escape方法
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11765 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、RegExp.escape静态方法 正则对象RegExp新增了一个名为escape()的静态方法，可以对字符串中不安全的，或者可以影响正则匹配的字符进行转义。 这些在正则中具有特殊含义的字符包括，如点号(.)、星号(*)、问号(?)、加号(+)、花括号({})、方括号([])、圆括号(())、竖线(|)和反斜杠()等。 目前所有现代浏览器都已经支持了该特性。 语法 语法比较简单，如下所示： RegExp.escape(string)...
HTML新search元素,h1规则要变,声明式Shadow DOM
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11729 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、全新的search元素 Chrome 117和Safari 17新支持了一个HTML元素名为 <search>，用于定义搜索区域，通常作为表单的一部分。 兼容性如下图所示： 如果大家通过AI了解<search>元素，可能会看到类似下图的说法，注意，这个说法是错误的，一本正经的胡说八道。...
好诶，select下拉框元素支持样式完全自定义啦！
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11746 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 Tips：演示页面在本文最后。 一、appearance:base-select <select>下拉框元素现在已经支持完全自定义了，太不容易了，太感动了。 LuLu UI的Edge主题的Select组件现在已经接入了这个新特性。 如果你的浏览器是Chrome 135+，可以访问这里体验一下。...
CSS小图标剪裁终极解决方案clip-path shape()函数
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11736 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、告别path函数 clip-path的path()函数可以传入SVG路径，从而实现元素的剪裁效果，比方说SVG小图标。 例如： clip-path: path("M 0 200...