学习animate.css包含了一组炫酷、有趣、跨浏览器的动画
1、animate.css包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。
第一步:引入animate.css样式文件或者引入某些平台的CDN文件:
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
第二步:在HTML标签中添加animate提供的class类名:
<h1 class="animated infinite fadeInLeft delay-2s slow">Example</h1>
其中animated类是必须要添加的;
接着添加需要执行的动画类名,例如上面例子使用的:fadeInLeft(从左边淡入),当然还有很多其他的动画类名:animated类名;
如果某个动画效果需要无线重复运行可以加上infinite类名,这样动画效果就会一直重复执行;
需要延迟执行某个动画效果可以加上对应的delay-2s类名,这里表示延迟2秒运行动画效果,当然还有其他的延迟类名:延迟效果类名;
如果要控制某个动画效果的运行时间长短或者快慢可以加上对应的slow类名,这里表示动画从开始到结束运行2秒,当然还有其他的动画运行速度类名:动画运行速度类名;
以上内容是自己学习animated这个动画插件的成果,希望对正在学习的您有所帮助,谢谢。
附上animated插件作者的github地址:https://github.com/daneden/animate.css
打开支付宝首页搜索“” 立即领红包
学习animate.css包含了一组炫酷、有趣、跨浏览器的动画的更多相关文章
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- Slick.js+Animate.css 结合让网页炫动起来
一个代码示例: html部分 <link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css ...
- 如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...
- 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...
- 17.纯 CSS 创作炫酷的同心矩形旋转动画
原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...
- Android学习笔记_42_各种图形的炫酷效果的实现和使用
一.文档位置: 这里在android中的图形,在帮助文档的这个页面, android-sdk-windows\docs\guide\topics\resources\drawable-resourc ...
- 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
随机推荐
- 树上背包O(n*m^2)|| 多叉树转二叉树 || o(n*m)???
#. 选课 描述 提交 自定义测试 问题描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有 ...
- php html生成页面二维码
这个方法主要是针对html页面生成二维码,因此需要一个配置文件phpqrcode.php(因内容太多所以请大家去百度网盘自己下载即可,链接: https://pan.baidu.com/s/1_2mA ...
- Gradle 使用笔记
Springboot2.0 多模块打包问题 打包命令由gradle build 变成 gradle bootJar 或 gradle bootWar buildscript { repositorie ...
- Ubuntu16.04 安装NVIDIA显卡驱动
1. 禁用系统默认的集成驱动 Ubuntu系统集成的显卡驱动程序是nouveau,它是第三方为NVIDIA开发的开源驱动,我们需要先将其屏蔽才能安装NVIDIA官方驱动.将驱动添加到黑名单blackl ...
- Spring注解式事务解析
#Spring注解式事务解析 增加一个Advisor 首先往Spring容器新增一个Advisor,BeanFactoryTransactionAttributeSourceAdvisor,它包含了T ...
- poj1106-Post Office(DP)
Description There is a straight highway with villages alongside the highway. The highway is represen ...
- Problem B. Beer Refrigerator
http://codeforces.com/gym/241680/problem/B比赛的时候考虑的是,它们3个尽可能接近,然后好麻烦,不如暴力枚举,这里不需要质因数分解,而是两重循环枚举所有因数,第 ...
- Centos6.5部署vsftpd+mysql认证
1.FTP传输原理 FTP,文件传输协议,是工作在应用层,基于TCP实现,依赖于互联网即可通讯. 1)连接模式 控制(命令)连接,用来通信,一直在线,客户端随机端口连接服务端TCP:21端口. 数据连 ...
- 2017-11-8—自动控制原理在软硬件方面上的应用和体现
这个话题讲起来是非常大的,先贴一下百度百科的定义: 自动控制(automatic control)是指在没有人直接参与的情况下,利用外加的设备或装置,使机器.设备或生产过程的某个工作状态或参数自动地按 ...
- css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...