avatar
文章
2136
标签
34
分类
0
首頁
目录
标签
友鏈
关于
Logo阿超animejs示例 返回首页
搜索
首頁
目录
标签
友鏈
关于

animejs示例

发表于2025-02-17|更新于2026-02-24
|浏览量:

读书使人充实,思考使人深邃,交谈使人清醒。——富兰克林

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

等等

前端
上一篇
scopedb官网首页
我来到这个世界,为了看看太阳和蓝色的地平线。——《城门开》 https://github.com/scopedb/scopedb-site/pull/32 最近忙着给scopedb做了一个最简单的官网首页 这里说到一些细节吧,首先是适配移动端或者说小尺寸屏幕,这里在没有移动端对应UI设计图的情况下,我们采取pc的布局,因此字体单位使用的vw 然后是这张图片,未来可能会改为带动画的,效果会比较惊艳和抢眼 首页tsx如下 123456789101112131415161718192021222324252627282930313233343536373839import React from "react";import styles from './index.module.css';import Layout from "@theme/Layout";import clsx from "clsx";function HomepageBanner(): React.JSX.Element ...
下一篇
animejs
万人都要将火熄灭,我一人独将此火高高举起。——海子 https://github.com/juliangarnier/anime https://animejs.com/ Anime.js:为网页动画注入生命 在现代网页开发中,动画不再仅仅是装饰性的元素,而是增强用户体验、提升交互性的关键部分。Anime.js,一个轻量级的 JavaScript 动画库,提供了一个易于使用的接口来创建复杂的动画效果。它不仅让开发者能够轻松制作视觉冲击力强的动画,还能确保这些动画在各大浏览器中的兼容性,完美融合到现代网页设计中。 什么是 Anime.js?Anime.js 是一个功能强大的 JavaScript 动画库,它能够为 HTML、CSS、SVG、JavaScript 对象等提供平滑、流畅的动画效果。不同于许多其他动画库,Anime.js 不仅支持基本的动画(如平移、旋转、缩放等),还支持更为复杂的时间线和属性控制,让动画的表现更加生动和灵活。 特性和优势 多种动画支持:Anime.js 不仅可以控制 DOM 元素的 CSS 属性,还可以操作 SVG 属性、JavaScript 对象的...
相关推荐
2021-03-24
js移除指定key
尽管世界和人生是坏透了,其中却有一件东西永远是好,那便是青春——显克维奇 可以看到delete我们的ruben.age后,ruben只剩个name了 一般常用与在作为请求参数时,服务端可能不需要这个参数场景下使用
2022-09-01
blob和base64互转
交易场上的朋友胜过柜子里的钱款——托·富勒 blob转base64 1234567891011121314151617// blob转base64async function blobToBase64(blob) { let buffer = await blob.arrayBuffer() let bytes = new Uint8Array(buffer); console.log(bytes) // do anything with the byte array here let binary = '' var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } base64 = 'data:image/webp;base64,' + window.btoa(binary) co...
2020-09-02
js获取url上的参数
获取url上的参数 123456789101112function getUrlParam(name) { if (name == null) { return name; } var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { //return unescape(r[2]); return r[2]; } return null; } 1console.log(getUrlParam("id"));
2024-11-11
HBuilderX运行到iOS真机
人生的光荣,不在永不失败,而在于能够屡扑屡起。——拿破仑 直接选择运行——运行到手机或模拟器——运行到iOS APP基座 这里使用标准基座运行需要使用Apple证书签名 点开有四个配置项 Bundle ID(AppID)——是自己设置的 这个可以是包名,我们到Identifiers里新建一个,Bundle ID(AppID)填写我们的包名即可 https://developer.apple.com/account/resources/identifiers/list 证书私钥密码——是自己设置的 我们在mac上打开钥匙串访问,左上角菜单栏点击钥匙串访问 选择证书助理——使用"chao a"从证书颁发机构请求证书 然后填写自己设置的密码 此处还生成一个文件CertificateSigningRequest.certSigningRequest 证书profile文件: 在Profiles新建后下载得到robotrobot.mobileprovision,我们在HBuilderX选这个文件即可 https://developer.apple.com/accou...
2023-04-07
sketch.js
生活中,谅解是可以温厚的宽恕;谅解可以换回感情上的损失。——佚名 分享一个前端项目:https://soulwire.github.io/sketch.js 用途是可以做一些鼠标特效,例如其官网有很多例子: https://soulwire.github.io/sketch.js/ 非常的有趣
2023-04-19
slidev
君子先择而后交,小人先交而后择。——王通 分享一个为开发者打造的演示文稿工具:https://cn.sli.dev/ Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容,同时拥有支持 HTML 和 Vue 组件的能力,并且能够呈现像素级完美的布局,还在你的演讲稿中内置了互动的演示样例。 它使用了功能丰富的 markdown 文件来生成精美的幻灯片,具有即时重载的体验。它还拥有很多内置的集成功能,如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的,因此你可以使用它进行任何操作 —— 具有无限的可能性。 你可以在 为什么选 Slidev 部分了解更多关于本项目的设计初衷。
avatar
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
文章
2136
标签
34
分类
0
Follow Me
公告
This is my Blog
最新文章
fastfetch2026-04-03
claudecode安装puaskill2026-04-02
mac使用claude配置token2026-04-01
OpenBB2026-03-31
awesome-claude-code2026-03-30
© 2025 - 2026 By 阿超框架 Hexo 8.1.1|主题 Butterfly 5.5.4
搜索
数据加载中