Zheeeng retuiteado
用Cherry studio和高德地图MCP，整了个旅游规划智能体。
-自带景点地图，一键导航
-详细时间规划，预约提醒
中文
Zheeeng
344 posts
Zheeeng retuiteado
Zheeeng retuiteado
content wave with CSS scroll animation
li {
animation: grow both var(--custom-in-out-ease);
animation-timeline: view(inline);
}
@keyframes grow { 50% { width: var(--desired-size); } }
bonus javascript for drag to scroll with inertia ✨
Will Thomson@willthomson__
This widget looks pretty nice.
English
Zheeeng retuiteado
Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.
But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!
Heavily commented: codepen.io/thebabydino/pe…
English
Zheeeng retuiteado
I made a thing: scroll-driven, almost pure CSS infinite circular gallery rotation - check it out on @CodePen
codepen.io/thebabydino/pe…
Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.
Made with 🖤 for this week's #CodePenChallenge.
English
Zheeeng retuiteado
Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.
css-shape.com/inverted-radiu…
English
Zheeeng retuiteado
Cursor 员工在编辑器中经常使用的快捷键推荐
ian@shaoruu
list of keybindings i use all the time in @cursor_ai composer: - cmd-backspace to cancel generation - cmd-enter/backspace to accept/reject all - tab/shift-tab to cycle between messages to prompt more and resubmit - cmd-alt-/ to open model toggle - cmd-n/r to create new composer - cmd-shift-K to open composer as bar - cmd-[ ] to cycle through composers - cmd-alt-l to open histories - cmd-w to close composer what other keybindings would people want added?
中文
Zheeeng retuiteado
Zheeeng retuiteado
Zheeeng retuiteado
💡 CSS Tip!
Do you want to detect the overflow of an element? Does it have a scrollbar or not? It's possible with only CSS (No JavaScript!)
You can even style any element on the page using this information 🤩
See reply for code and demo👇
English
Zheeeng retuiteado
Zheeeng retuiteado
Zheeeng retuiteado
extra little details™
animate a CSS custom property to sync scrollbar-color with the active item ✨
html {
scrollbar-color: oklch(65% 0.3 var(--p)) #0000;
animation: sync;
animation-timeline: --ul;
animation-range: entry 50% exit 50%
}
@keyframes sync { to { --p: 320; } }
jhey ʕ•ᴥ•ʔ@jh3yy
CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }}
English
Zheeeng retuiteado
👼 神级Prompt多到用不完，我用Claude将它们重构了一遍
Anthropic @AnthropicAI 将自家的提示语生成升级成了提示语优化之后，并把整个过程拆成了五步：
1️⃣ 前三步是了解用户想要什么、生成执行的流程图、从样本里学习生成规则、这时候会生成第一版提示语。我都没有输入样本，Claude 就会主动去分析预期的样本会长什么样。
2️⃣ 后面两步就更有意思了，值得单独讲讲：
- 补充执行步骤的细节：这次我优化的是长文摘要的提示语，最终生成的执行步骤从阅读文本、确定信息点、列出要素、确定目标受众、分析原文语气和风格，给出合适的hook以及原因，还限制了句子数量。说实话这比我自己写推文的思路都详细。
- 动态调整输入文本、样本、输出模块在整个提示语的顺序：打个比方，Claude 会主动推测用于总结的文章内容可能会比较长，这一part就会被移动到更前面。
我把优化的过程都录制下来了👇：
中文
Zheeeng retuiteado
CSS-only magnetic link effect 🤯
li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; }
ul::before {
left: anchor(--a left);
width: anchor-size(--a width);
}
using CSS anchor positioning, declare an anchor on hover for the indicator 🚀
English
Zheeeng retuiteado
Zheeeng retuiteado
推荐这个一键生成网站设计的AI工具，叫Relume，目前发现的最佳，没有之一。使用感很丝滑，如沐春风，生成结果质量也很高。以后网站设计可以不用找我了👋🏻😂
中文
Zheeeng retuiteado
✨ Build @nextjs, @tailwindcss & @shadcn UIs with a visual editor.
Export the code with one click.
Link below.
English
Zheeeng retuiteado
Zheeeng retuiteado
had to do a JavaScript version and bust out some GSAP
like ~20 lines of code 👇
jhey ʕ•ᴥ•ʔ@jh3yy
scramble text with CSS – translate some letter strips on :hover – vertical letters with word-break/white-space a:is(:hover, :focus-visible) span { transition: translate 0.25s var(--delay) steps(11); translate: -50% calc(100% - 1lh); }
English