仿钉钉官网滚动效果
发表于|更新于
|浏览量:
恭维含有一种毒剂，使最坚强的人也不免昏昏陶醉。——大仲马
今天在bilibili刷到个视频
https://www.bilibili.com/video/BV12z4y1s7nE/
发现实现了钉钉官网效果
非常的炫酷，仓库源码：
https://gitee.com/vary-space/hello-world/tree/12z4y1s7nE
相关推荐
2024-11-13
uniapp-cli工程
人生苦短，虽说如此，还会感到无聊。——佚名 除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。 #环境安装全局安装 vue-cli 1npm install -g @vue/cli 复制代码 #创建uni-app 使用正式版（对应HBuilderX最新正式版） 1vue create -p dcloudio/uni-preset-vue my-project 复制代码 使用alpha版（对应HBuilderX最新alpha版） 1vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project 复制代码 使用Vue3/Vite版 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板） 1npx degit dcloudio/uni-preset-vue#vite my-vue3-project 复制代码 1npx degit dcloudio/uni-preset-vue#vite-alpha...
2024-11-21
渐变的艺术：变量的力量——阿超与ChatGPT 4o的代码探险
人类之所以有进步，主要原因是下一代不怎么听上一代的话。——倪匡 效果在右下角，请滚动页面查看～ .scroll-text { position: fixed; bottom: 10%; right: 10%; background: linear-gradient(180deg,var(--color-light) 0%,var(--color-light) 40%,var(--color-dark) 60%,var(--color-dark) 100%); background-size: 100% 200%; background-position: center calc(var(--scroll) * 100%); background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent;...
2023-10-27
react服务端组件
过分的赞美，对于心智是有害的。——克雷洛夫 相关博客如下： Introducing Zero-Bundle-Size React Server Components – React https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components 仓库地址： https://github.com/reactjs/server-components-demo 这是一个使用服务器组件构建的Demo应用，服务器组件是一个实验性的 React 功能。我们强烈建议在浏览此演示之前观看介绍服务器组件的演讲视频。该视频包括演示代码的流程，并重点介绍服务器组件如何工作以及它们提供的功能的关键点。 使用node18+，进入Demo 12npm install --legacy-peer-depsnpm start 此处再运行Docker，运行数据库环境 1docker-compose up 然后打开 http://localhost:...
2022-01-02
图片懒加载
如果你只读每个人都在读的书，你也只能想到每个人都能想到的事。——村上春树 首先贴代码： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .ruben { width: 400px; height: 300px; background-color: #e8e8e8 } .ruben img { width: 100%; height: 100%; } </style> <...
2022-03-05
Generator函数自动执行器
有的东西被遗忘，有的东西销声匿迹，有的东西死了，而其中几乎不含有悲剧性因素。——《寻羊冒险记》 今天用typescript写了个Generator函数自动执行器： 1234567891011export function runGenAuto(fn: Function) { let gen: Generator<Function> = fn() function next() { let result = gen.next() if (result.done) { return result.value } return result.value(next) } return next();} 为了测试效果，我们定义一个Generator函数，这个函数用于将URLSearchParams转换成一般对象 当然直接遍历不用generator也能实现上述需求，但这里主要是为了测上方的自动执行Generator...
2022-04-22
css实现鼠标划入显示拖动条
古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼 代码如下： 1234567891011121314151617181920212223242526272829<!DOCTYPE html><html> <head> <style> .ruben-container{ height: calc(100vh - 70vh); width: calc(100vw - 70vw); overflow-y: auto; } .ruben-container::-webkit-scrollbar { width: 4px; } .ruben-container::-webkit-scrollbar-thumb{ ...
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog