本文首发于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. 指标统计:基于流计算 Oceanus(Flink) 实现实时 UVPV 统计

    作者:吴云涛,腾讯 CSIG 高级工程师导语 | 最近梳理了一下如何用 Flink 来实现实时的 UV.PV 指标的统计,并和公司内微视部门的同事交流.然后针对该场景做了简化,并发现使用 Flink ...

  2. 对比7种分布式事务方案,还是偏爱阿里开源的Seata,真香!(原理+实战)

    前言 这是<Spring Cloud 进阶>专栏的第六篇文章,往期文章如下: 五十五张图告诉你微服务的灵魂摆渡者Nacos究竟有多强? openFeign夺命连环9问,这谁受得了? 阿里面 ...

  3. Scrum Meeting 0609

    零.说明 日期:2021-6-9 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 完成前端功能 ...

  4. oo第四单元及期末总结

    一.第四单元作业架构总结 第一次UML作业: 在分析各指令所需要的信息后建立了类(class),操作(operation),属性(Attribute)这几个类用来存储分析后的结果,而接口在本次作业中与 ...

  5. HTML 罗盘式时钟

    代码块: 1 <!DOCTYPE html> 2 <html lang="zh-hans"> 3 <head> 4 <meta chars ...

  6. Redis6.2发布 地理位置功能增强了什么?

    原文地址:https://developer.aliyun.com/article/780257 Redis社区最近刚刚发布Redis6.2 RC1版本,在本次发布中,阿里云Tair团队(阿里云云内存 ...

  7. robot_framewok自动化测试--(4)常用关键字介绍

    常用关键字介绍 在学习一门编程语言的时候,大多教材都是从打印"hello world"开始.我们可以像编程语言一样来学习 Robot Framework.虽然通过 RIDE 提供& ...

  8. Jmeter接口数据流测试及持续集成部署:(一)Jmeter环境搭建:安装JDK、安装Jmeter、安装Fiddler、安装ant

    Jmeter环境搭建 1.安装JDK 官方下载地址:https://www.oracle.com/java/technologies/downloads/ 安装方法:双击jdk安装包,一直下一步安装即 ...

  9. [源码解析] PyTorch 分布式(2) ----- DataParallel(上)

    [源码解析] PyTorch 分布式(2) ----- DataParallel(上) 目录 [源码解析] PyTorch 分布式(2) ----- DataParallel(上) 0x00 摘要 0 ...

  10. DDL数据定义语言

    DDL数据定义语言 (一)概述 DDL(Data Definition Language):数据定义语言,用来定义数据库对象,库.表.列等:创建.删除.修改 库,表结构.主要分为操作数据库的DDL和操 ...