Neumorphic Elements

发表于2023-04-11|更新于2026-02-24

|浏览量:

与智者同行，必得智慧；与愚者相伴，必定无益处。——大卫王

分享一些前端漂亮的小组件

https://codepen.io/myacode/pen/PoqQQNM

效果还是非常惊艳的

相关推荐

mac鱼眼效果

人不能象走兽那样活着，应该追求知识和美德。——但丁上代码，上效果： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style ...

尊重生命、尊重他人也尊重自己的生命，是生命进程中的伴随物，也是心理健康的一个条件。——弗洛姆 Project N.O.M.A.D.Node for Offline Media, Archives, and DataKnowledge That Never Goes Offline Project N.O.M.A.D：一台把“知识、教育、工具、AI”背在身上的离线小型堡垒Project N.O.M.A.D 的自我介绍特别像一句誓言： Project N.O.M.A.D, is a self-contained, offline survival computer packed with critical tools, knowledge, and AI to keep you informed and empowered—anytime, anywhere. 他不想当“又一个必须联网才能运行”的应用集合，他更像一个坚决的旅行者：行李里装着知识、地图、课程、数据工具、笔记本、甚至还有能跟你聊天的本地 AI——不管你身处哪里，哪怕网络断了，他也想把“信息与能力”留在你...

吾生也有涯，而知也无涯。——庄子 OmX - Oh My codeX（OMX）：你的 Codex 不是一个人在战斗OMX 的自我介绍很干脆，也很有“人格”： OmX - Oh My codeX: Your codex is not alone. Add hooks, agent teams, HUDs, and so much more. 它像一个在你身后随时扶你一把的“战术教练 + 运行时管家”：不抢 Codex 的方向盘，但把你的驾驶舱升级得更顺手、更稳定、更能跑长任务。 OMX 不是另一个 Codex。它明确站在 Codex 身边，做一个“工作流层（workflow layer）”： OMX is a workflow layer for OpenAI Codex CLI.It keeps Codex as the execution engine… 也就是说——Codex 仍然是那个真正冲向战场、执行工具、写代码、跑命令的执行引擎；OMX 则像一套“作战条令 + 组织体系 + 仪表盘 + 记事本”，让你从“想到哪做到哪”的临时起意，变成一条从澄清到交付的稳定流水线...

css直接引用svg代码

一切安乐，无不来自困苦。——《我是猫》有些时候我们想直接引入一个svg图标，又不想创建svg文件，或者编写svg代码到html中，想直接在css中引入可以转码+加前缀直接引用，这是一段svg代码 123456789101112<svg viewBox='0 0 161 161' xmlns='http://www.w3.org/2000/svg'> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/> </filter> <rect width='100%'...

vue页面加载完毕之后执行

好奇心造就科学家和诗人。——法朗士当vue页面加载完成后触发我们在html开发中经常是使用window.onload实现 123window.onload = () => { } 但在vue中我们使用this.$nextTick 123this.$nextTick(() => { console.log("页面加载完啦~")}) 效果如下

文本精准对齐

即使饱含泪水，我仍旧将它们擦干；即使不被信任，我仍旧相信。就是这样，也将是这样。——保罗·科埃略的《阿莱夫》 CSS 如何让文本随背景图等比例缩放？背景在响应式布局中，我们经常需要让文本标注准确地贴合背景图，并且在窗口缩放时，文本应保持相对位置不变，同时等比例缩放。然而，传统的 position: absolute 方式往往会导致文本发生偏移，影响对齐。最佳实践：position + transform在 CSS 中，最简单且稳定的方法是结合： 1234position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); 这能确保文本始终居中，不随容器缩放而偏移。原理解析 position: absolute 确定参考点文本相对于 position: relative 的父元素进行绝对定位。 left: 50%; top: 50% 让文本的左上角位于背景图 50% 的位置。 transform: translate(-50%, -50%) 精准居中向左移动自身宽度 50% (t...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中