📄️ 介绍
以下是我制作的一些小组件,灵感和创意来自网上资源,有的已经在本站中使用。
📄️ 浏览器窗口
当你想要在网页中模拟一个浏览器的窗口时,这个组件可以帮到你,当然它是模拟 Mac 系统浏览器的样式。
📄️ 演示区域
由于我的网站上经常要使用到一些展示效果,为了和其它正文内容块做区分,特地设计和封装了一个演示区域的组件。
📄️ 边框上跑动的光影
这个组件的灵感是来源于 Raycast 网站,刚开始看到很好奇,这个跑动的光影是怎么实现的,难道是 svg 做成的动画?
📄️ 局部自定义鼠标样式
如果你想在页面中局部实现自定义鼠标指针的样式,这个组件可以帮到你。另外你也可以根据组件代码,了解网页中实现自定义鼠标指针所涉及的知识和原理。
📄️ 开源项目仓库信息卡片
文章中经常要介绍一些开源项目,特地制作信息卡片为开源项目信息提供优美的展示方式。💁♂️
📄️ 可左右拖拽改变大小的区块
可以通过左右两边的拖动区域按下鼠标来改变区块的宽度,对于演示响应式布局非常必要,所有做了这个组件。
📄️ 视差悬停倾斜效果
视差效果可以有效增加网页的互动趣味性。当你的鼠标在卡片上移动的时候,卡片会向当前坐标倾斜。鼠标移出卡片区域,又会恢复正常样式。
📄️ 终端命令行面板
一个模拟出来的终端界面,字体很优雅,特别是闪动的光标才是灵魂。
📄️ 滑动对比显示
<BlindSlider
📄️ 光影动画按钮
代码实现