animejs示例
发表于|更新于
|浏览量:
读书使人充实，思考使人深邃，交谈使人清醒。——富兰克林
https://codepen.io/collection/XLebem/
这里有anime.js实现的不少案例
例如移动端的卡片弹出动画实现：
https://codepen.io/aryankap/pen/poERmEM
带进度条的提交按钮：
https://codepen.io/andrewmillen/pen/MoKLob
带动画的小图标：
https://codepen.io/nat-davydova/details/dyorEMm
夜间模式切换按钮：
https://codepen.io/borntofrappe/details/aboPapm
等等
相关推荐
2023-09-11
css画一个圈带一条线
深窥自己的心，而后发觉一切的奇迹在你自己。——培根 用到的是css的background属性和radial-gradient 12345678910111213141516/** 淡蓝渲染到20px * 白色渲染到20px（分割线 * 白色渲染到21px（分割线 * 淡蓝渲染到21px * 淡蓝渲染到40px * 后续白色打底 */background: radial-gradient( circle at center, #f6faff 20px, #fff 20px, #fff 21px, #f6faff 21px, #f6faff 40px, #fff 0); 效果： .ruben{ background: radial-gradient( circle at center, #f6faff 20px, #fff 20px, #fff 21px, #f6faff 21px, #f6faff 40px...
2023-09-12
安装prettier-vscode并指定
纯洁的思想，可使最微小的行动高贵起来。——莎士比亚 我们在使用vscode格式化代码时，可能有多个可选的格式化风格方案，这里使用prettier进行 其github地址： https://github.com/prettier/prettier-vscode 安装完毕后即可指定
2022-10-31
display:block小技巧
成功之道，在于你为获得成功所做出的积极努力，而不在于预先就衡量这种成功的价值——哈里特 分享一个小技巧 display:block 可以将style标签可见 例如： 12345678910111213<body> <style contenteditable style="display: block;white-space: pre"> * { transition: all 0.2s } html { background: #ff00ff; font-size: 16px } </style></body> 因为我们这里给了contenteditable 所以可以直接在页面上编辑 试试吧 * { transition: all 0.2s } html { ...
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;...
2022-10-16
ics-to-json
我无论作什麽，始终在想着，只要我的精力允许我的话，我就要首先为我的祖国服务。——（苏联）巴甫 昨天提到可以订阅ics，那能不能将ics转json呢？可以试试这个ics-to-json github：https://github.com/cwlsn/ics-to-json 使用： 123456789npm i ics-to-json// 或者cnpm i ics-to-json// 或者pnpm i ics-to-json// 或者yarn add ics-to-json// 或者tyarn add ics-to-json 我这里通过browserify测试： 1cnpm install -g browserify 编写main.js 12const icsToJson = require('ics-to-json')window.icsToJson = icsToJson.default 1browserify main.js -o bundle.js 编写页面 123456789101112<!DOCTYPE html><htm...
2023-03-24
promisees
爱情是没有悲剧的。唯有缺乏爱情才有悲剧。——泰斯嘉 分享一个网站：https://bevacqua.github.io/promisees/ github：https://github.com/bevacqua/promisees 这个网站可以帮我们清晰地看到Promise的执行过程 非常的有趣和实用
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog