avatar
文章
2198
标签
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 对象的...
相关推荐
2024-01-15
纯css实现炫酷头像效果
官僚作风是一门使可能变成不可能的艺术。——萨尔塞多 分享一个炫酷头像效果: 从b站渡一教育的一个视频看到的(不是推广,只是注明出处) 123456789101112131415161718192021222324252627282930313233343536373839<style> img { --s: 280px; --c1: #c02942; --c2: #ecd078; --b: 5px; --f: 1; --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%; --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b)); width: var(--s); height: var(--s); cursor: pointer; transition: 0.5s; padding-top: 100px; outline: ...
2023-10-03
threejs+vite+ts实现官网基础部分
一个温柔的目光,一句由衷的话语,能使人忍受生活给他的许多磨难。——高尔基 官方文档:three.js manual 源代码从这里改进: GitHub - PacktPublishing/Learn-Three.js-Fourth-edition: Learn Three.js, Fourth edition, published by Packt 我本地进行了一些修改,首先package.json 12345678910111213141516171819{ "name": "three-ts", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc &...
2022-06-03
pnpm
曾因酒醉鞭名马,生怕情多累美人。——郁达夫 官方网址:https://www.pnpm.cn/ 我们在使用npm下载前端所需依赖时,会反复下载、重复下载,如果有一款工具,能够缓存起来我们的下载,那就是pnpm了 快速pnpm 是同类工具速度的将近 2 倍 高效node_modules 中的所有文件均链接自单一存储位置 支持单体仓库pnpm 内置了对单个源码仓库中包含多个软件包的支持 权限严格pnpm 创建的 node_modules 默认并非扁平结构,因此代码无法对任意软件包进行访问 安装很简单,就像普通安装一个模块一样即可: 12npm i -g pnpmpnpm -v 使用yarn 12yarn global add pnpmpnpm -v
2020-07-03
js时间转换
//时间戳格式化 1234567891011//时间转换 function stamptime(time) { var date = new Date(time) var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; ...
2024-04-17
octokit.js
暴食杀人多于利剑杀人。——伯里兹 分享一个框架封装了GitHub的API调用 GitHub - octokit/octokit.js: The all-batteries-included GitHub SDK for Browsers, Node.js, and Deno. 等于是一个SDK 目前,GitHub 维护以下语言/框架/平台的 SDK: JavaScript / TypeScript C# / .NET Ruby Terraform provider 还有 2 个 SDK,它们是根据 GitHub 的 OpenAPI 描述生成的! C# / .NET Go 浏览器里安装: 123<script type="module">import { Octokit, App } from "https://esm.sh/octokit";</script> 示例:获取经过身份验证的用户的用户名。 12345678// C...
2023-07-30
悬停卡片效果
人在无端微笑时,不是百无聊赖,就是痛苦难当。——王小波 分享一个通过css实现的卡片悬停效果 代码地址:cards: 悬浮卡片 在线演示:Document
avatar
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
文章
2198
标签
34
分类
0
Follow Me
公告
This is my Blog
最新文章
ppf-contact-solver2026-06-04
OpenStock2026-06-03
awesome-free-apps2026-06-02
FreeDomain2026-06-01
taste-skill2026-05-31
© 2025 - 2026 By 阿超框架 Hexo 8.1.1|主题 Butterfly 5.5.4
搜索
数据加载中