好用的样式动画库集合(css、js)

news2024/9/30 11:37:08

文章目录

  • 前言
  • 一、Animate.css
  • 二、Anime.js
  • 三、CSShake
  • 四、Hover.css
  • 五、AniJS
  • 六、Animista
  • 七、Tachyons-animate
  • 八、Sequence.js
  • 九、Infinite
  • 十、OBNOXIOUS.CSS
  • 十一、MOTION UI
  • 十二、Keyframes.app
  • 十三、AnimXYZ
  • 十四、Whirl
  • 十五、Hamburgers
  • 十六、Vivify
  • 十七、Magic Animations CSS3
  • 十八、cssanimation.io
  • 十九、Angrytools
  • 二十、WickedCSS
  • 二十一、Three Dots
  • 二十二、背景图-bansal
    • `如有启发,可点赞收藏哟~`


前言

好用的css动画


一、Animate.css

Animate.css

在这里插入图片描述

二、Anime.js

Anime.js

是一个轻量级的 JavaScript 动画库,具有简单但功能强大的 API。它适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象
在这里插入图片描述

三、CSShake

CSShake
一个专门为在你的网页中摇动元素而设计的 CSS 库
在这里插入图片描述

四、Hover.css

Hover.css
一个 CSS 动画库,旨在与你的网站中的按钮和其他 UI 元素一起使用
在这里插入图片描述

五、AniJS

AniJS
AniJS 是一个动画库,允许您以简单的“类似句子”的结构向元素添加动画
在这里插入图片描述

六、Animista

Animista
按需 CSS 动画
在这里插入图片描述

七、Tachyons-animate

Tachyons-animate
Tachyons 本身是一个具有大量实用程序类的原子 CSS 库,用于通过向你需要的内容添加类来设计任何东西
在这里插入图片描述

八、Sequence.js

Sequence.js
Sequence.js 是一个 JavaScript 库,它提供了一个响应式 CSS 框架,用于创建独特的滑块、演示文稿、横幅和其他基于步骤的应用程序
在这里插入图片描述

九、Infinite

Infinite
这些动画,如旋转和脉冲,专门设计用于永远运行和重复
在这里插入图片描述

十、OBNOXIOUS.CSS

OBNOXIOUS.CSS
在这里插入图片描述

十一、MOTION UI

MOTION UI
用于创建灵活的 CSS 过渡和动画的 Sass 库
在这里插入图片描述

十二、Keyframes.app

Keyframes.app
用于生成自定义 CSS 关键帧动画的图形用户界面

在这里插入图片描述

十三、AnimXYZ

AnimXYZ
AnimXYZ 可帮助你为你的网站创建、自定义和组合动画。专为 Vue、React、SCSS 和 CSS 构建
在这里插入图片描述

十四、Whirl

Whirl
轻松加载 CSS 动画!

十五、Hamburgers

Hamburgers

Hamburgers 是一组CSS 动画汉堡包图标。还包括作为 Sass 库的源。它是模块化和可定制的,所以你可以自己做汉堡包。
在这里插入图片描述

十六、Vivify

Vivify
在这里插入图片描述

十七、Magic Animations CSS3

Magic Animations CSS3
在这里插入图片描述

十八、cssanimation.io

cssanimation.io
在这里插入图片描述

十九、Angrytools

Angrytools
在这里插入图片描述

二十、WickedCSS

WickedCSS
在这里插入图片描述

二十一、Three Dots

Three Dots
在这里插入图片描述

二十二、背景图-bansal

bansal
在这里插入图片描述


如有启发,可点赞收藏哟~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1261681.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Vue】Linux 运行 npm run serve 报错 vue-cli-service: Permission denied

问题描述 在Linux系统上运行npm run serve命令时,控制台报错: sudo npm run serve project50.1.0 serve vue-cli-service serve sh: 1: vue-cli-service: Permission denied错误截图如下: 原因分析 该错误是由于vue-cli-service文件权限不…

Web前端开发技术:图像与多媒体文件

在现代的Web开发中,图像和多媒体文件在各种网站和应用程序中扮演着至关重要的角色。它们不仅能提供更丰富的内容,还能大大提高应用程序的吸引力和用户体验。本文将深入介绍一些关键的Web前端开发技术,这些技术将有助于开发者在处理图像和多媒…

任意多个磁盘时的kickstart配置方法

最近工作遇到一个需求:当机器中存在任意多个磁盘时,kickstart配置文件应该如何编写? 我查询了一些资料,得到的结果大多是针对特定数量的磁盘的配置(比如,2个,3个)。 那么假如因为某些…

HarmonyOS 数据持久化 Preferences 如何在页面中对数据进行读写

背景介绍 最近在了解并跟着官方文档尝试做一个鸿蒙app 小demo的过程中对在app中保存数据遇到些问题 特此记录下来 这里的数据持久化以 Preferences为例子展开 废话不多说 这里直接上节目(官方提供的文档示例:) 以Stage模型为例 1.明确preferences的类型 import data_prefer…

类 —— 友元、常/静态成员函数

类 类的大小 和结构体大小求法一致。但需注意,普通空类也会占用 1 字节大小,因为普通空类可以实例化对象。 而 抽象空类占 4 字节(32 位机中),因为抽象空类中含有虚指针(含有虚函数的非抽象空类同理&am…

云原生实战课大纲<2>

我们pod的数据挂载文件可以使用 pv-pvc的方式 1. 创建pv池 2. 在pv池中创建pv,并且设置pv的模式 3. 编写pod 写对应的pvc 申请书 就可以了这就是我们k8s中的pv和pvc 基于pv池创建pv的时候会有容量限制呢么关于配置呢,我们以前会有这种场景 比如说在dock…

试题与研究编辑部试题与研究杂志社试题与研究杂志2023年第36期目录

试题与研究编辑部试题与研究杂志社试题与研究杂志2023年第36期目录 教海纵横 高中生物教学中启发式教学方法的应用 买玲; 1-3 初中文言文教学传承传统文化精神的策略探索 张志静; 4-6《试题与研究》投稿:cn7kantougao163.com 信息化背景下初中地理高效…

Unity中Shader的BRDF解析(一)

文章目录 前言现在我们主要来看Standard的 漫反射 和 镜面反射一、PBS的核心计算BRDF二、Standard的镜面高光颜色三、具体的BRDF计算对于BRDF的具体计算,在下篇文章中,继续解析 四、最终代码.cginc文件Shader文件 前言 在上篇文章中,我们解析…

OpenGL之Mesa3D编译for Ubuntu20.04(三十六)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注:Android…

入金牌投资平台,学先进炒股技术,掌未来宝贵财富

钱是个好东西,它能让人享受到世间的甜,它能让人感受到万众瞩目的荣耀,它能让人得到一切该有的尊敬。可以这么说,没有人不爱钱。可是,君子爱财取之有道。对于正常的人而言,都只希望通过正规的渠道赚到尽可能…

SSL证书是选免费的还是付费的好?

在当今的数字化时代,网络安全已经成为了每个网站和应用程序的重要组成部分。为了保护用户的数据安全,许多网站和应用程序都选择了使用SSL证书。然而,面对市场上的各种SSL证书,用户往往会面临一个问题:SSL证书是选免费的…

抽象类-Java

抽象类 一、父类方法的不确定性二、抽象类介绍三、抽象类细节四、练习题 一、父类方法的不确定性 引入:对于一个动物,不知道它吃什么,比如猫吃鱼,兔子吃萝卜。动物类中的 eat 方法往往由它的子类去具体实现。 class Animal {pub…

前端开发学习 (三) 列表功能

一、列表功能 1、列表功能 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compa…

Buzz库python代码示例

Buzz库来编写一个下载器程序。 php <?php require_once vendor/autoload.php; // 引入Buzz库 use Buzz\Browser; use Buzz\Message\Response; $browser new Browser(); // 设置 $browser->setHttpClient(new HttpClientProxy([ host > , port > , ])…

c++容器详解Vector、deque、list、set、multiset、map、multimap、queue、stcak、Array

容器 数据结构描述实现头文件向量(vector)连续存储的元素<vector>列表(list)由节点组成的双向链表,每个结点包含着一个元素<list>双向队列(deque)连续存储的指向不同元素的指针所组成的数组<deque>集合(set)由节点组成的红黑树,每个节点都包含着一个元素,…

chatglm3 vllm部署推理;api访问使用

用fastchat部署暂时有各种问题,参考:https://github.com/lm-sys/FastChat/pull/2622 本篇用vllm运行测试可以使用 1、vllm运行 python -m vllm.entrypoints.api_server --model /***/chatglm/chatglm3-6b/

景联文科技加入中国人工智能产业联盟(AIIA)数据委员会

近日&#xff0c;景联文科技加入中国人工智能产业联盟&#xff08;AIIA&#xff09;数据委员会&#xff0c;成为委员会成员单位。 中国人工智能产业发展联盟&#xff08;简称AIIA&#xff09;是在国家发改委、科技部、工信部、网信办指导下&#xff0c;由中国信息通信研究院等单…

colab notebook导出为PDF

目录 方法一&#xff1a;使用浏览器打印功能 方法二&#xff1a;使用nbconvert转换 方法三&#xff1a;在线转换 方法一&#xff1a;使用浏览器打印功能 一般快捷键是CTRLP 然后改变目标打印机为另存为PDF 这样就可以将notebook保存为PDF了 方法二&#xff1a;使用nbconver…

【labelimg使用小技巧】

小技巧 打开labelimg后&#xff0c;在上方的视图中&#xff0c;勾选自动保存&#xff0c;即可每次操作后自行保存&#xff0c;无需确认保存所在文件位置 上述勾选完成后&#xff0c;W为新建标注框&#xff0c;进行命名后&#xff0c;S即为切换下一张图像 如何放大图片呢 &am…