本文首发于https://www.1024nav.com/tools/css-animation-library 转载请注明出处

整理了日常前端开发中常用的css动画库,让你的网页动起来,可以在生成中使用,非常酷炫,值得收藏

animxyz

AnimXYZ 可帮助您为网站创建、自定义和合成动画。由 CSS 变量提供支持,允许几乎无限数量的独特动画而无需编写单个关键帧。节省时间并完全控制元素的移动方式。为 Vue、React、SCSS 和 CSS 构建,AnimXYZ 将使您的网站栩栩如生。

官网地址:https://animxyz.com/

Izmir 图片hover动画效果

Izmir 是一个迷你 CSS 库,可让您快速创建漂亮的图像悬停元素。包含大量样式类和自定义属性,伊兹密尔允许您完全控制和几乎无限的可能性。只需将 CSS 库加载到您的项目中,添加元素标记并结合您选择的样式类来自定义构建您完美的图像悬停效果。

GITHUB地址:https://github.com/ciar4n/Izmir

官网地址:https://ciar4n.com/izmir/

Animatopy

集成了animate.css,但是更加简单,更加灵活,更加方便。只需要拷贝所需代码即可

官网地址:https://sarthology.github.io/Animatopy/

3个CSS动画库,比Animated还好用,让你的网站酷炫起来的更多相关文章

  1. Animate.css动画库,简单的使用,以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  2. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. uni-app引入css动画库

    引入Animate动画库 Animate中文网地址:http://www.animate.net.cn/ Animate下载地址:https://daneden.github.io/animate.c ...

  4. 八个解决你80%需求的CSS动画库

    八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...

  5. css动画库

    转载自:http://www.cnblogs.com/starof/p/4968769.html 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方 ...

  6. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  7. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  8. (生产)animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  9. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

随机推荐

  1. elasticsearch入门(简单的crud操作)

    记录一下,elasticsearch从创建索引到插入数据的一个crud操作. 一.创建索引 curl -XPUT "http://192.168.99.1:9200/productindex ...

  2. Noip模拟29(瞎眼忌) 2021.8.3

    T1 最长不下降子序列 在此记录自己的瞎眼... 考场上像一个傻$der$,自己为了防范上升序列和不下降序列的不同特意的造了一组$hack$数据来卡自己:(第一行是序列长度,第二行是序列) 6 1 5 ...

  3. PCIe知识摘要记录

    摘: 一. 在PCIe的Spec中,并没有特别详细的关于Root Complex的定义,从实际的角度来讲,可以把Root Complex理解为CPU与PCIe总线系统通信的媒介.Endpoint处于P ...

  4. hdu 5100 Chessboard (额,,,,,就叫它趣味数学题吧)

    题意: 用K*1的砖块去覆盖N*N的大矩形,问最多能覆盖多少块. 详细证明:(转载自matrix67) Matrix67: The Aha Moments 趣题:用 k × 1 的矩形覆盖 n × n ...

  5. Zabbix 4.4 离线安装 使用mariadb的踩坑,无法停止服务

    先分享一个网站,之前就没注意过有这个网站,不知道是啥时候开放的.里面分享了N多zabbix的模板. https://share.zabbix.com/ 报错如下 Unsupported charset ...

  6. 【代码更新】单细胞分析实录(21): 非负矩阵分解(NMF)的R代码实现,只需两步,啥图都有

    1. 起因 之前的代码(单细胞分析实录(17): 非负矩阵分解(NMF)代码演示)没有涉及到python语法,只有4个python命令行,就跟Linux下面的ls grep一样的.然鹅,有几个小伙伴不 ...

  7. pip 安装使用 ImportError: No module named setuptools 解决方法

    安装过程详见这篇博客: http://www.ttlsa.com/python/how-to-install-and-use-pip-ttlsa/ 安装后运行到:python setup.py ins ...

  8. 在代码生成工具Database2Sharp中增加Vue&Element 工作流页面的快速生成

    在我们基于框架开发系统的时候,往往对一些应用场景的页面对进行了归纳总结,因此对大多数情况下的页面呈现逻辑都做了清晰的分析,因此在我们基于框架的基础上,增量式开发业务功能的时候,能够事半功倍.代码生成工 ...

  9. pyinstaller打包:AttributeError: module ‘win32ctypes.pywin32.win32api’ has no attribute ‘error’

    pyinstaller打包:AttributeError: module 'win32ctypes.pywin32.win32api' has no attribute 'error' 是因为pyin ...

  10. Linux mem 2.5 Buddy 内存回收机制

    文章目录 1. 简介 2. LRU 组织 2.1 LRU 链表 2.2 LRU Cache 2.3 LRU 移动操作 2.3.1 page 加入 LRU 2.3.2 其他 LRU 移动操作 3. LR ...