animate.css动画样式详解

一、使用步骤

<!-- <link rel="stylesheet" href="https://www.jq22.com/jquery/animate-3.1.0.min.css"> -->
<link rel="stylesheet" href="animate.css">
<div class="animated bounceInLeft">从左边进入</div>

使用详细步骤:https://www.dowebok.com/98.html

二、属性

1、Attention Seekers
bounce:弹跳
flash:闪烁
pulse:脉冲(放大然后回到正常大小)
rubber:橡皮筋
Band
shake:摇(左右)
swing:摇摆(上下,以中心为原点)
tada:(缩小然后摇摆,幅度比较小)
wobble:摇晃(左右和上下都有,即沿着一个弧移动,比较快)

jello:果冻(像果冻一样抖动)
2、Bouncing Entrances(弹跳进入页面的动画)
bounceInLeft
bounceOutLeft
bounceInRight
bounceOutRight
bounceInDown
bounceOutDown
bounceInUp
bounceOutUp

3、Bouncing Exits(弹跳离开页面的动画)
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

4、Fading Entrances(颜色逐渐加深进入页面的动画)
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig

5、Fading Exits(颜色逐渐变淡离开页面的动画)
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

6、Flippers(翻动效果)
flip
flipInX
flipInY
flipOutX
flipOutY

7、Lightspeed(倾斜同时fade的进入进出效果)
lightSpeedIn
lightSpeedOut

8、Rotating Entrances(回转进入)
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

9、Rotating Exits(回转出去)
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

10、Sliders
slideInDown
slideInLeft
slideInRight
slideOutLeft
slideOutRight
slideOutUp

11、Specials特殊效果
hinge
rollIn
rollOut

演示:https://www.dowebok.com/demo/2014/98/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354355.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

osgi 模块化_OSGi案例研究:模块化vert.x

osgi 模块化OSGi使Java代码可以清晰地划分为多个模块&#xff0c;这些模块称为捆绑软件 &#xff0c;可以访问由每个捆绑软件的类加载器控制的代码和资源。 OSGi 服务提供了一种附加的分离机制&#xff1a;接口的用户无需依赖于实现类&#xff0c;工厂等。 以下案例研究旨在使O…

两个常数的卷积为多少_卷积(Convolution)与好核函数(Good Kernel)

把最近在分析里学到的有趣的东西整理写一写&#xff0c;初学者不专业。我们先来简单介绍Rudin的数学分析里Stone-Weierstrass定理的证明[1]。Stone-Weierstrass定理&#xff1a;对于任意定义在 上的连续&#xff08;continuous&#xff09;函数 &#xff0c;总存在一个多项式函…

Font Awesome(一套绝佳的图标字体库和CSS框架)(icon图标)

官网&#xff1a;https://fontawesome.dashgame.com/ 一、步骤 1、到官网下载 2、将以下代码粘贴到网页HTML代码的 部分 <link href"css/font-awesome.min.css" rel"stylesheet">3、 <i class"fa fa-camera-retro"></i> f…

第三场阴影场与属性访问器接口

这是“ 影子字段与属性访问器”界面的 第3轮 。 如果您是新手&#xff0c;但不确定要怎么做&#xff0c;请查看我以前的文章或关于开发JavaFX应用程序时节省内存的第一篇文章 。 作为Java开发人员&#xff0c;我主要关心的是在开发JavaFX域模型时在性能 &#xff0c; 内存使用和…

移动端布局三种视口_前端基础:必须要知道的移动端适配(4)——视口

视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中&#xff0c;通常与浏览器窗口相同&#xff0c;但不包括浏览器的UI&#xff0c; 菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种&#xff1a;布局视口、视觉视口和理想视口&#xf…

js判断移动端,pc端,安卓,苹果浏览器的方法

js 判断安卓或者ios 之indexOf方式&#xff08;一&#xff09; //判断访问终端 var browser{versions:function(){var u navigator.userAgent, app navigator.appVersion;return {trident: u.indexOf(Trident) > -1, //IE内核presto: u.indexOf(Presto) > -1, //opera…

Vue路由开启keep-alive缓存页面

mode:hash模式下&#xff1a; HTML部分&#xff1a; <template><div id"app"><keep-alive> <!--使用keep-alive会将页面缓存--><router-view v-if"$route.meta.keepAlive"></router-view></keep-alive> &l…

平安性格测试题及答案_面试要求做性格测试,该怎么做?

为了筛选到更符合岗位&#xff0c;许多企业在招聘时都选择了“性格测试”。比如&#xff0c;像“华为、宝洁、阿里”等这样的大厂&#xff0c;据说每年都有不少人因为性格测试而凉凉&#xff0c;性格测试真有决定你“生死”的作用吗&#xff1f;那么&#xff0c;在做测试题的时…

CSS行内元素和块级元素的水平居中,垂直居中,水平垂直居中实现

常用内联元素&#xff1a;a,img,input,lable,select,span,textarea,font 常用的块级元素&#xff1a;div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li 一、水平居中 行内元素居中&#xff1a; text-align:center 图片&#xff0c;单个块级元素居中&#xff1a;margin-left和…

mysql scrapy 重复数据_大数据python(scrapy)爬虫爬取招聘网站数据并存入mysql后分析...

基于Scrapy的爬虫爬取腾讯招聘网站岗位数据视频(见本头条号视频)根据TIOBE语言排行榜更新的最新程序语言使用排行榜显示&#xff0c;python位居第三&#xff0c;同比增加2.39%&#xff0c;为什么会越来越火&#xff0c;越来越受欢迎呢&#xff0c;背后折射出的是人工智能、机器…

vim 文本一些行注释,替换

按键操作&#xff1a;注释&#xff1a;ctrlv 进入列编辑模式,向下或向上移动光标,把需要注释的行的开头标记起来,然后按大写的I,再插入注释符,比如"#",再按Esc,就会全部注释了。删除&#xff1a;先按v,进入visual模式,横向选中列的个数(如"#"注释符号,需要…

如何在几分钟内安装Red Hat Container Development Kit(CDK)

作为负责开发容器化应用程序提供的可能性的应用程序开发人员或架构师&#xff0c;将所有工具集中在一起以使您入门时几乎没有帮助。 到现在。 红帽容器开发套件&#xff08;CDK&#xff09; 安装变得简单&#xff01; 红帽提供了一个容器开发套件&#xff08;CDK&#xff0…

vue的使用(引用/创建vue项目)(一)

在程序开发中&#xff0c;有三种方式创建vue项目&#xff0c;本地引入vuejs、使用cdn引入vuejs、使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用&#xff0c;大大方便了开发步骤&#xff0c;使用广泛。 一、vue本地引用 在官网下载vue.js&#xff0c;通过s…

你不知道的JS5-原型

1、原型 [[prototype]] js中的对象有一个特殊的[[prototype]]内置属性&#xff0c;其实就是对于其他对象的引用&#xff0c;几乎所有的对象在创建时[[prototype]]属性都会被赋予一个非空的值 使用for..in和in操作符都会查找对象的整条原型链 所有普通的[[prototype]]链最终都会…

enum 定义3个属性_和平精英:合金龙骨有3个隐藏属性,比玛莎“水下无敌”还唬人...

欢迎诸位小伙伴们来到天哥开讲的《和平精英》“精英那点事儿”~接下来呢&#xff0c;咱们聊聊合金龙骨的3个隐藏属性、土豪玩家“自投罗网”以及游戏里的“公主病患者”等有趣的玩家游戏经历与发现~得&#xff0c;废话不多说了&#xff0c;还是各位小伙伴们熟悉的“老配方”&am…

vue-cli项目引用文件/组件/库 的注意事项(一)

vue引入的问题 &#xff08;1&#xff09;main.js入口文件引入(项目中所有的页面都会加载main.js&#xff0c;所以用户放全局变量) // Element import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’ Vue.use(ElementUI) &#xff08;2&am…

java中缓冲区和缓存_Java中的Google协议缓冲区

java中缓冲区和缓存总览 协议缓冲区是一种用于结构化数据的开源编码机制。 它是由Google开发的&#xff0c;旨在实现语言/平台中立且可扩展。 在本文中&#xff0c;我的目的是介绍Java平台上下文中协议缓冲区的基本用法。 Protobuff比XML更快&#xff0c;更简单&#xff0c;并…

三十七 Python分布式爬虫打造搜索引擎Scrapy精讲—将bloomfilter(布隆过滤器)集成到scrapy-redis中...

Python分布式爬虫打造搜索引擎Scrapy精讲—将bloomfilter(布隆过滤器)集成到scrapy-redis中&#xff0c;判断URL是否重复 布隆过滤器(Bloom Filter)详解 基本概念 如果想判断一个元素是不是在一个集合里&#xff0c;一般想到的是将所有元素保存起来&#xff0c;然后通过比较确定…

绩效管理的实际案例:2024年绩效提升重要方法

案例一&#xff1a;目标设定与衡量的艺术 背景&#xff1a;某科技公司每年都会为其全球员工设定年度目标。然而&#xff0c;这些目标往往过于模糊&#xff0c;导致员工不清楚自己需要完成什么。 问题&#xff1a;目标设定不清晰&#xff0c;导致员工感到困惑和不满。 解决方…

array python 交集_模糊数学Python库简介和评测

写在前面模糊数学是国内外许多工学、管理学研究生以上的选修甚至必修课程。但对于非数学专业而言&#xff0c;掌握模糊数学的各种计算方法、了解各种方法的用途&#xff08;应用场景&#xff09;其实要比理解模糊数学的“数学”理论要重要得多。目前在Matlab等数学工具中其实也…