CSS动画库——animate.css的使用
Animate.css是一款强大的CSS3动画库
官网地址:https://daneden.github.io/animate.css/
使用方法如下所示:
(1)下载animate.css
下载地址:https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
下载完成后,可以保存在项目需要引入的位置。
(2)在HTML文件中head部分引入animate.css
<link rel="stylesheet" type="text/css" href="assets/css/animate.min.css"/>
(3)基本模板如下所示:
总结:其实animate.css就是通过简单的调用class类名来实现动画效果。实质上还是操作CSS。更多更丰富的类名可以参看官网效果,根据项目开发实际需求选择不同的动态效果。
CSS动画库——animate.css的使用的更多相关文章
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
- 【转载】css3动画简介以及动画库animate.css的使用
原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...
- 如何使用动画库animate.css
animate.css是一个CSS3动画库,里面预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeI ...
- 动画库animate.css的用法
简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...
- 使用CSS3动画库animate.css
IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画 用法 1 ...
- 动画库Animate.css
笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...
- CSS3动画库——animate.css
初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便: 效果展示官网:http://daneden.github. ...
随机推荐
- 运维生涯中总有一次痛彻心扉的rm命令
为了防止误操作,配置rm命令别名,同时可以进行恢复删除文件 1. 在/tmp目录下新建两个目录,命名为:.trash,tools cd /tmp/ mkdir .trash mkdir tools 2 ...
- 四(1)、springcloud之Ribbon初步配置
1.概述 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 -负载均衡的工具.Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡 ...
- XX Russia Team Open, High School Programming Contest St Petersburg, Barnaul, Tbilisi, Almaty, Kremenchug, November 30, 2019
ContestLink easy: AFI medium-easy: BDH medium: CGKL ???: EJ A. Attractive Flowers 签到. B. Blocking th ...
- D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图. 散点图(Scatter Chart),通常是一横一竖 ...
- 2019_7_30python
当6引号给予变量的时候,变为字符串 6引号注释多行 语言元素 python中大小写敏感 不要和关键字 print( a + b ) print( a - b ) print( a * b ) prin ...
- java 面试2019
[第一部分] 面试要领[第1题] 流程必知必会[第2题] JDK源码[第二部分] 类和对象[第二篇] 面向对象基础[第1题] 面向对象是什么?[第2题] 类加载的过程[第3题] 类加载器有哪些[第4题 ...
- java.lang.ThreadLocal的作用和原理?列举在哪些程序中见过ThreadLocal的使用?
java.lang.ThreadLocal的作用和原理?列举在哪些程序中见过ThreadLocal的使用? 说明类java.lang.ThreadLocal的作用和原理.列举在哪些程序中见过Threa ...
- ElementUI的使用
一.安装 1.安装 在项目目录下执行 npm i element-ui -S 2.引入 在 main.js 中写入以下内容: import ElementUI from 'element-ui'; i ...
- Centos6.5 安装 LAMP
Centos 安装 LAMP 系统: Centos 6.5 Apache 2.4 + PHP 7.2 + Mysql 5.7 准备工作 centos 查看版本 查看 centos版本 How to C ...
- 快速求1~n的k!,k的逆元
1.求1~n的k! 2.求inv(k!) 3.inv((k-1)!)=inv(k!)*k%mod 4.inv(k)=inv(k!)*((k-1)!)%mod 如 https://www.cnblogs ...