Command Palette

Search for a command to run...

网页利用 view-transition 仿 AppStore 转场动画
css HTML 信息技术

网页利用 view-transition 仿 AppStore 转场动画

其实上个月为了体验这功能就做了这个demo项目，碍于后面有些事忙起来遗忘了，这次补发文章出来。 介绍一下 view-transition 背景，是 Web 开发中用于实现 DOM 元素过渡效果的技术，在24年中旬引入，现在各大主流浏览器也已经支持了，除了火狐（真的会有人用火狐吗）。 项目链接：<https://github.com/miniwater/AppStore> 示例：miniwater....

AppStore HTML HTML5 view-transition
记录几个免费的 Tailwindcss 组件库
css HTML 信息技术

记录几个免费的 Tailwindcss 组件库

在前端开发中，如果不想自己画组件，就只能使用组件库，单一组件库种类少，但是如果引用过多组件库，又会使得项目依赖繁重。 ‌Tailwind CSS 则是一款功能类优先的原子化 CSS 框架‌，通过直接在 HTML 中组合高度可复用的工具类，快速构建定制化界面。 TailAwesome 是互联网上最好的 Tailwind 模板和 UI 套件的精选列表。 <https://www.tailawesome...

CSS Tailwind CSS UI UI kits 前端 组件库
css HTML 信息技术

HTML 锚点偏移方法 防止被头部遮挡

由于顶部菜单存在 position:fixed ，而引起的的锚点位置偏移。 在css中，给锚点添加偏移量，直接就可以了 html { scroll-padding-top: 200px; scroll-behavior: smooth; } 就是这么简单的办法，我不知道为什么百度搜不出来 其他不是用正负边距进行抵消，就是用js写滚动。 网络上的反面教材： .content { margin-top...

CSS HTML HTML5 菜单 锚点
css HTML 信息技术

冷门的css属性：initial

分享一个比较强硬的属性, 可以把几乎所有css属性进行重置。前端在 ctrl + c 时就不用这么痛苦检查样式了，虽然没办法像 <iframe src="..."></iframe> 那样彻底隔离 css 和 js 。 一键隔离所有父级css属性： all: initial; 还可以单独还原css属性默认值： color: initial; background-color: initial; b...

CSS HTML