Animate:基础学习
animate.css:牛逼的动画库
Logo
概念
- Animate.css是一个css动画样式库,其目标是让CSS动画像喝水一样容易(Just-add-water CSS Animation)。
- animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.即:animate.css是有一堆狂拽酷炫吊炸天、跨浏览器的动画特效的综合动画库
- animate.css是一个来自国外的CSS3动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达70多种动画特效,几乎包含了所有常见的动画特效。
- 重点:浏览器兼容,animate.css底层是通过css3实现的,当然是只兼容支持CSS3 animate属性的浏览器: IE10+、Firefox、Chrome、Opera、Safari。
官方网址
https://daneden.github.io/animate.css/
具体使用
Animate.css的基本使用
// 引入文件
<link rel="stylesheet" href="animate.min.css">// 给要做动画的HTML标签添加上相对应的类,比如:
<div class="box myAnimated flip"></div>
注意:类animated的作用是控制动画的持续时间,是所有动画的前提条件, 在其后面的类则为动画的效果类。
案例演示
Animate初体验
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/animate.css"><style>.box{width: 200px;height: 200px;background-color: red;margin: 100px auto;}</style> </head> <body><div class="box animated flip infinite delay-1s slow"></div> </body> </html>
Animate定制
更改基础类animated,可以自己定义动画时间。
其他动画效果也是如此,找到对应类,可以进行更改。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>02-Animate定制</title><link rel="stylesheet" href="css/animate.css"><style>.box{width: 200px;height: 200px;background-color: red;margin: 100px auto;}.animated {-webkit-animation-duration: 3s;animation-duration: 3s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}</style> </head> <body><div class="box animated infinite flip"></div> </body> </html>
登录界面定制
给登录按钮绑定一个点击事件,如果密码错误,让登录框晃动。<script type="text/javascript">$(function () {$('.login-btn').on('click', function () {// alert(0);// 1. 动态添加样式$('#panel').addClass('animated shake');// 2. 刷新页面setTimeout(function () {window.location.reload();}, 1000);});}); </script>
登录界面定制-动画叠加
动画叠加两种方式:
① 通过回调。
② 通过定时器。<script type="text/javascript">$(function () {$('.login-btn').on('click', function () {$('#panel').addClass('animated shake');setTimeout(function () {$('#panel').removeClass('shake').addClass('bounceOut');}, 1000);});}); </script>
Animate:基础学习相关推荐
- 【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
- python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内 继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
- 虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
- 动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础 大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...
- Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender Blender纹理基础学习视频教程 CGCookie – Funda ...
- ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
- 0基础学好python难不难_零基础学习Python难不难?Python有什么优势?
原标题:零基础学习Python难不难?Python有什么优势? Python是一种计算机程序设计语言.首先,我们普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如下载一个 ...
- 计算机一级ps2019,2019年计算机一级考试PS基础学习点子:PS菜单中英文对照表.docx...
2019 年计算机一级考试 PS 基础学习点子: PS 菜单中英文对照表 PS菜单中英文对照表 一.File New 2.Open 3.Open As 4.Open Recent Close 6.Sa ...
- Java零基础学习难吗
java编程是入行互联网的小伙伴们大多数的选择,那么对于零基础的小伙伴来说Java零基础学习难吗?如果你是初学者,你可以很好的理解java编程语言.并不困难.如果你的学习能力比较高,那么你对Java的 ...
- 零基础学习java,这些书一定要看!
学习java技术除了看视频,看书也是非常重要的,尤其是零基础同学,本文包含学习Java各个阶段的书籍推荐,史上最全,学习Java,没有书籍怎么行,就好比出征没带兵器一个道理,这些书籍整理出来给大家作为 ...
最新文章
- 如何扩大控件的触控响应区域
- python mainloop bind_Python3 tkinter基础 Frame bind 捕捉多键同时按
- Tomcat 配置详解/优化方案
- 基于公开数据的特殊人群在线活动特征挖掘
- iOS 横竖屏切换解决方案
- 极速PDF编辑器提示缺少字体如何解决
- Delphi基础教程第一季
- 2020年大数据营销案例_大数据营销案例分析
- Maven安装教程详解
- 网络安全从小白到专家
- ECharts折线图自定义横坐标显示或隐藏
- 计算机网络冗余码计算
- win7 台式电脑怎么调节屏幕亮度
- 5000的游戏电脑计算机配置,5000元电脑配置单,5000游戏电脑配置,直播电脑配置
- 三星 j3 android 8.0,三星J3 Pro官方台湾版安卓8.0固件线刷包:BRI-J330GDXS3BSF5
- 【物联网】物联网安全---编辑中
- 揭秘中小企业网络营销迷局与现状
- 排序算法比较次数总结
- java小游戏——走迷宫
- 一种基于熔丝修调的修调方案设计
热门文章
- String.fromCharCode()函数
- PyMySQL和MySQLdb的区别
- 在手动安装 Kubernetes 的基础上搭建微服务
- postgreSQL 自动递增序号
- C# WIN7电脑双屏设置不同内容的桌面
- Python引用复制,参数传递,弱引用与垃圾回收
- WSS3.0开发-过滤列表内容(2)--一个增强的列表元数据查询webpart(SmartQueryWebPart)...
- 强悍的Google Earth
- Spring中EmptyResultDataAccessException异常产生的原理及处理方法
- gradle安装及idea导入spring5.0x的源码