拾光记录
218个文档 导航 作者 Gitee
随笔记录4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端知识4
基础知识17
Vue框架19
UniApp14
微信小程序1
Java编程6
Java基础15
SpringBoot31
SpringMVC18
MyBatis9
SpringCloud15
中间件2
数据库4
MySQL13
Redis8
MongoDB10
其他数据库1
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv管理工具
Linux12
Linux常用命令Jar启动脚本VirtualBox安装CentOSVirtualBox安装Ubuntu树莓派安装及使用frp内网穿透ArchLinux:基础系统安装ArchLInux:图形化界面安装ArchLinux:常用软件ArchLinux:深度优化ArchLinux:NiriArchLinux:模块记录
软件工具12
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaRustFSPicGoVSCodeDocker
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

animate.min.css

animate.min.css是一个开源的CSS动画库,提供了丰富的动画效果,可以快速实现网页的动画效果。

个人使用版本

<link rel="stylesheet" href="https://fan9.oss-cn-chengdu.aliyuncs.com/oss/animate.min.css"/>

使用方式

出现方式与延迟时长控制

<div class="left">
  <div class="left-site-name animated fadeInDown"><a href="/">FANMR.CN</a></div>
  <div class="left-site-desc animated fadeInDown">安于所待而不困于所待</div>
  <div class="left-nav-item animated fadeInUp" style="animation-delay: 300ms !important;"><a href="/">网站首页</a></div>
  <div class="left-nav-item  animated fadeInUp" style="animation-delay: 500ms !important;"><a href="/">外链导航</a></div>
  <div class="left-nav-item  animated fadeInUp" style="animation-delay: 700ms !important;"><a href="/">关于作者</a></div>
</div>

动画时长控制

style="animation-delay: 500ms !important; animation-duration: 2s !important";
animate.min.css个人使用版本使用方式