首页 > 其他分享 >超30个好用的css动画库合集

超30个好用的css动画库合集

时间：2024-09-09 16:20:19浏览次数：10  
标签：动画 io 30 js 网址 https 合集 css

文章目录

1. Animate.css

网址: https://animate.style/
Animate.css 提供了大量预设的动画效果，简单易用，常用于元素的进入和退出动画。
在这里插入图片描述

2. Hover.css

网址: https://ianlunn.github.io/Hover/
Hover.css 专注于鼠标悬停时的动画效果，适用于按钮、图片等交互元素。
在这里插入图片描述

3. CSShake

网址: https://elrumordelaluz.github.io/csshake/
CSShake 提供了多种震动效果，适合用于警告、强调等场景。
在这里插入图片描述

4. AniJS

网址: https://anijs.github.io/
AniJS 是一个声明式动画库，允许你通过 HTML 语法轻松定义动画，无需编写 JavaScript。
在这里插入图片描述

5. Lottie

网址: https://airbnb.io/lottie/
Lottie 允许开发者将高质量的 SVG 动画嵌入网页中，适合复杂的交互设计。
在这里插入图片描述

6. Animista - On-Demand CSS Animations Library

网址: https://animista.net/
Animista 提供多种预设动画效果，用户可以在线定制和生成动画代码。
在这里插入图片描述

7. Hover Effect Ideas

网址: https://tympanus.net/Development/HoverEffectIdeas/
Hover Effect Ideas 提供了多种创意的鼠标悬停动画效果。

在这里插入图片描述

8. Mo.js

网址: https://mojs.github.io/
Mo.js 提供了强大的动画工具，支持复杂的时间轴和多段动画控制。
在这里插入图片描述

9. Hamburgers

网址: https://jonsuh.com/hamburgers/
Hamburgers 是专注于汉堡菜单按钮动画的库，适合移动端应用。
在这里插入图片描述

10. Loaders.css

网址: https://github.com/ConnorAtherton/loaders.css
Loaders.css 是一个轻量的加载动画库，提供了丰富的加载动画样式。
在这里插入图片描述

11. SpinKit

网址: https://tobiasahlin.com/spinkit/
SpinKit 提供多种 CSS 加载动画，适用于网页加载状态指示。

在这里插入图片描述

12. CSS Animation.io

网址: https://cssanimation.io/
cssanimation.io 是一个在线动画库，提供多种进入、退出、悬停等效果。
在这里插入图片描述

13. Tuesday

网址: https://shakrmedia.github.io/tuesday/
Tuesday 是一个轻量的动画库，提供类似 Animate.css 的动画效果。

在这里插入图片描述

14. Typed.js

网址: https://github.com/mattboldt/typed.js/
Typed.js 是一个提供打字机效果的动画库，适合动态文本展示。
在这里插入图片描述

15. WOW.js

网址: https://wowjs.uk/
WOW.js 与 Animate.css 搭配使用，实现滚动触发的动画效果。

在这里插入图片描述

16. Effeckt.css

网址: https://h5bp.github.io/Effeckt.css/
Effeckt.css 是一个开源动画库，专注于移动端的过渡和交互效果。
在这里插入图片描述

17. Magic CSS3 Animations

网址: https://www.minimamente.com/project/magic/
Magic CSS3 Animations 提供了丰富的动画效果，适合提升网页的视觉冲击力。
在这里插入图片描述

18. Textillate.js

网址: http://textillate.js.org/
Textillate.js 是一个专注于文本动画的库，允许你为文字添加多种动态效果。
在这里插入图片描述

19. Sequence.js

网址: https://www.sequencejs.com/
Sequence.js 是一个提供平滑内容切换效果的动画库，适用于内容展示和滑动效果。
在这里插入图片描述

20. mimic.css

网址：https://erictreacy.github.io/mimic.css/
在这里插入图片描述

21. Imagehover.css

网址：https://imagehover.io/
在这里插入图片描述

22. CSS Animation Kit

网址：https://angrytools.com/css/animation/
在这里插入图片描述

23. LDRS - UI Ball

网址：https://uiball.com/ldrs/
在这里插入图片描述

24. AnimatiSS

网址：https://xsgames.co/animatiss/
在这里插入图片描述

25. Granim.js - Gradient Animations

网址：https://sarcadass.github.io/granim.js/

在这里插入图片描述

26. tsParticles | JavaScript Particles, Confetti and Fireworks animations for your website

网址：https://particles.js.org/
在这里插入图片描述

27. Vanta.js - Animated 3D Backgrounds For Your Website

网址：https://www.vantajs.com/
在这里插入图片描述

28. Moving Letters | Text animated with JavaScript & anime.js

网址：https://tobiasahlin.com/moving-letters/

使用 JavaScript 和 Anime.js 的文本动画集合。
在这里插入图片描述

29. Epic Spinners

网址：https://epic-spinners.vuestic.dev/
仅限CSS。易于使用。VueJS集成。
在这里插入图片描述

30. particles.js

网址：https://vincentgarreau.com/particles.js/

轻量级的JavaScript库，适合设置动态背景。

在这里插入图片描述

31. Keyframes.app

网址：https://keyframes.app/

一款基于时间关键帧，在线制作网页动画的网站，你无需在编辑器和浏览器直接互相切换，及所见即所得。keyframes.app提供在线制作和谷歌浏览器扩展插件两种形式。
在这里插入图片描述

32. lightGallery

网址：https://www.lightgalleryjs.com/
一个轻量级、模块化的JavaScript图像和视频灯箱库插件。适用于React.js、Vue.js、Angular和TypeScript。
在这里插入图片描述

33. Whirl: CSS loading animations with minimal effort!

网址：https://whirl.netlify.app/
一组 CSS 加载动画，示例包括：弧形、基础型、弹跳、追逐、颜色范围、色轮、不同行方向、点等。

在这里插入图片描述

34. Three Dots

网址：https://nzbin.github.io/three-dots/
Three Dots是一组仅用单个元素制作的CSS加载动画。这个项目不仅能提高你的CSS技能，还能激发你的想象力。
在这里插入图片描述

通过使用这些 CSS 动画库，可以轻松为网页增加各种有趣的动画效果。每个库都有不同的特点和适用场景，选择适合你的项目的动画库，将大大提升开发效率和用户体验。

标签：动画,io,30,js,网址,https,合集,css
From： https://blog.csdn.net/qq_36012563/article/details/141958192

相关文章

  • Web大学生网页作业成品——动漫海贼王介绍网页设计与实现(HTML+CSS)（1个页面）
    ......
  • Web大学生网页作业成品——联想商品商城网页设计与实现(HTML+CSS)（1个页面）
    ......
  • 聚道云软件连接器9月新增应用合集（1）
    9月更新概要新增应用：应用1：太力商城应用2：万里牛应用3：梓如商旅应用4：百胜E3新增应用应用1：太力商城太力商城是3C自营B2B网上商城，主营产品包括手机、平板电脑及其他相关智能设备，还有产品操盘、渠道、市场、物流、信息流及资金流等服务。已打通接口：POST产品信息查询接口P......
  • COSC3088 Essentials of IT and Ethics
    COSC3088EssentialsofITandEthicsAssessmentTask2:MultimediaLinkedInResourceCourseCode: COSC3088Weighting: Thisassessmentisworth40%ofyourfinalmarkforthisCourseLength: 1000-wordvisualresourceora3-minutevideo(+/-10%)Taskappr......
  • CSS中元素将不再响应鼠标事件（如点击、悬停等）。pointer-events: none;
    按钮点击无效pointer-events:none; 是一种CSS样式规则，用于指定元素在用户与之交互时的行为。当应用了 pointer-events:none; 样式时，元素将不再响应鼠标事件（如点击、悬停等），即使用户点击该元素上的内容，也不会触发任何与该元素相关的事件。主要作用：禁用用户交互：当将 p......
  • CSS3新特性
    CSS3新特性本章目标了解CSS3新特性CSS3概述CSS3是什么CSS代表“CasadingStyleSheets”，就是样式表，是一种替代并为网站添加样式的标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在internet开始普及的时候，就能够使用样式表对网页进行......
  • 中移ML307A(4G Cat1,C-SDK,OpenCPU)模组学习开发-使用i2c采集sht30温湿度数据
    <p><iframename="ifd"src="https://mnifdv.cn/resource/cnblogs/ML307A_OPEN"frameborder="0"scrolling="auto"width="100%"height="1500"></iframe></p>  测试1,把文件拷贝到自己工程的 ......
  • 【整理】【微信小程序开发】合集
    【uniapp-黑马优购|首页】小程序首页全局配置(home、网络请求、轮播图、分类...)二维码系列：https://ewm.proedu.com.cn/previewIndex/1033398自动化小程序渗透工具自动化反编译微信小程序，小程序安全评估工具，支持小程序的代码审计和发现敏感信息泄露等安全问题，自动解密，解......
  • 什么是CSS预处理器
    什么是CSS预处理器CSS预处理器简介常见的CSS预处理器示例一：使用变量定义颜色示例二：嵌套规则简化选择器示例三：Mixins实现重用示例四：使用@each循环遍历变量列表示例五：条件语句控制样式实际工作中的使用技巧CSS预处理器是一种脚本语言，它允许我们以编程的方式编写更加干......
  • UNIT BUSA3015 Business Forecasting
    UNITBUSA3015BusinessForecasting,Session2,2024AssessmentTask       Report1Duedate              11:59pmFriday13thSeptemberWeight(%)            20%Taskdescription       ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99