Animate.css简单使用

最新推荐文章于 2022-11-19 20:10:04 发布
最新推荐文章于 2022-11-19 20:10:04 发布
阅读量1k 收藏 3
点赞数 2
分类专栏： css 文章标签： Animate.css

引入animate.css文件

1.网络引用 

<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">

2.下载css

https://daneden.github.io/animate.css/，下载并保存为css文件

使用方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/animate.css">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
            * {
            margin: 0;
            padding: 0;
        }

        .modal_content {
            width: 500px;
            height: 500px;
            margin-left: 650px;
            background-color: rgba(44, 55, 84, 0.8);
            margin-top: 150px;
            border-radius: 25px;
            /*设置动画属性*/
			/*动画持续时间*/
            -webkit-animation-duration: 3s;
           /*动画延迟时间*/
            -webkit-animation-delay: 1s;
           /*动画执行次数*/
            animation-iteration-count: 1;  
        }

        @media screen and (max-width:1000px) {
            .modal_content {
                width: 300px;
                height: 500px;
                margin-left: -150px;
            }
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //给div增加类型添加动画
			var modal_animate= $('.modal_content');
            // infinite 无限重复动画  animated 规定是一个动画  tada动画名称
           modal_animate.addClass('animated tada');
		   //动画完后执行的函数
           modal_animate.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                    console.log('hello world'); //动画完毕后才打印
		    //移除动画
                    modal_animate.removeClass('animated tada');
                    //添加动画
		    modal_animate.addClass('animated rotateIn');
                });
        });
    </script>
</head>

<body>
    <div class="modal_content">
        <h1 align="center">文字部分</h1>
    </div>
</body>

</html>
宣讯
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
animate.css
01-18
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。
animate.css-4.1.1.zip
02-03
Animate.css是一个CSS3动画库，它使得在网页上添加复杂的动画变得简单快捷。通过在HTML元素上直接应用预定义的类名，就可以轻松实现各种动态效果，如淡入淡出、滑动、旋转、放大缩小等。这极大地简化了开发者的工作...
Animate.css 教程
weixin_34006965的博客
07-12 1325
animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。 基本用法 引入CSS文件 这个对你来说应该再容易不过了，我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件，如下： &lt;...
动画库animate.css的用法
weixin_33963189的博客
12-19 468
简介 animate.css是一个来自国外的 CSS3 动画库，它预设了引起弹跳（bounce）、摇摆（swing）、颤抖（wobble）、抖动（shake）、闪烁（flash）、翻转（flip）、旋转（rotate）、淡入淡出（fade）、滑动（Sliding）、光速（lightspeed）、缩放变焦（Zoom）、翻滚（roll）等多达 70 多种动画效果，借助 animate.css 能够很方...
一款非常好用的css动画库--animate.css
阳菜
09-07 4153
今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。 首先看怎么引用， 官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css 效果试用：https...
【css】使用Animate.css
weixin_46590928的博客
11-19 2440
自定义预设动画类的属性。}通过js代码修改css变量 // All animations will take twice the time to accomplish document . documentElement . style . setProperty('--animate-duration' , '2s');
wow.min.js和animate.css
04-20
在实际应用中，"wow.min.js" 和 "animate.css" 结合使用，可以帮助开发者快速创建具有吸引力的网页，而无需深入了解复杂的CSS3动画细节。同时，这种技术也适用于响应式设计，因为它们支持各种屏幕尺寸和设备。但需要...
jQuery封装animate.css的实例
10-18
### 四、使用封装的animateCss方法 现在你可以像下面这样调用封装好的方法来触发动画： ```javascript $('#box').animateCss('bounce'); ``` 这将使得`#box`元素立即开始执行`bounce`动画，并在动画结束后自动移除...
animate.min.css动画特效
04-08
总之，Animate.min.css是一个强大的CSS动画库，它为开发者提供了大量现成的动画效果，使得在网页设计中实现动态视觉效果变得简单快捷。无论你是前端新手还是经验丰富的开发者，Animate.css都是一个值得信赖的工具，...
animate(CSS动画库)
07-15
使用Animate.css非常简单，只需在HTML中引入animate.css文件，并给需要动画效果的元素添加相应的类名。例如，如果你想让一个元素有淡入效果，可以这样写： ```html <div class="animated fadeIn">Hello, World! ``` ...
jquery+CSS3做的走马灯（跑马灯）效果
11-28
纯jQuery+CSS3做的，避免marquee控件在部分浏览器上不支持的尴尬；原代码源自网络，但对原功能做了整改，使其支持动态添加、删除走马灯消息，另外对原代码进行精简，并添加详细中文注释，供参考学习； 代码资源仅为页面代码，jquery的js文件自行修改添加，相信这难不倒大家
animate.css的使用
m0_61685599的博客
10-24 4389
animate.css是一个CSS3动画库，它的里面预设了许多的常用动画。因为它把不同动画效果绑定到的是不同的类里面，所以我们想要使用的话，只需要先引用animate.css文件，再把你想要使用的那个类添加到元素上面就可以了。 第一步：引入animate.css文件： （可使用：http://www.bootcdn.cn/animate.css/的服务） <head> <link rel="stylesheet" href="animate.min.css"> &l
Animate.css的详解
qq_37647812的博客
02-24 6630
Animate.css是一款简单高效的css库，里面封装了若干种简单的常见动画，适合快速使用，同时也方便进行按需修改。 1、导入文件 <head> <link rel="stylesheet" href="animate.min.css"> </head> 2、给指定元素加上指定的动画样式 <div class="animated bounce"></div> animated，每一个应用animate.css效果的元素都必须添加这
Animate.css使用方法
qq_51649346的博客
06-01 6811
使用npm安装 1.2导入Animate.css文件 官网搬运代码见另一个博客Animate.css大部分情况下用这种，比较方便 2.Animate.css的使用 Animate.css基本用法 ​ 之前的animate.css用法，只需要在class里加上animated +动画名称就可以使用了，但现在animate.css已经更新了官方文档，现在的使用方法如下: 从Animate.css版本4开始，可以自定义属性来定义动画的持续时间、延迟、迭代
强大而酷炫的CSS3动画库Animate.css使用方法
热门推荐
尐轩web前端网络日志
12-23 1万+
今天介绍一个强大的CSS3库 Animate.css 库如其名 ，是一个动画库 通过它我们非常轻松地添加动画效果 “Just-add-water CSS animations” 像灌水一样简单 我们只需要添加几个类名 下载地址及动画效果戳这里：Animate.css 使用这个库只需要把animate.css引入我们的文件即可<link rel="stylesheet" href="s
animate.css 使用记录
HYeeee的博客
12-07 210
1、animate.css官网 2、vue使用animate.css没有效果 一定要加上前缀animate__， transition中使用也要记得加。 // 1 、安装 npm i animate.css -s // 2、main.js 中加入 import animated from 'animate.css' // 注册为全局组件 Vue.use(animated) // 3、使用 <router-view id="router-animate" class="animate__animat
使用animates.css给你的vue路由加上切换动画
业余前端的职业经历
05-25 1821
你有没有因为Vue自带的组件默认切换方式 感到难受么 那你来看菜鸟的这篇文章算是来对了。各位大爷里面请 因为本人的动画效果做的实在特别烂，就不在这里丢人了 直接用大神写好的动画哦 animate.css https://animate.style/ 官方地址 已经更新到 4.* 版本 不知不觉 让小菜鸟的我觉得技术这东西更新真的好快 然后 我用 vue-cli 创建了一个 初始化的脚手架项目 不要乱动什么就这个初始化项目 拿来当例子 最好了 点击上面home和about 来实现 组件的切换 默认是
Animate.css的简单使用方法
weixin_51877577的博客
01-10 1038
Animate.css的简单使用方法 今天给大家介绍一个适用于前端的动画插件：Animate.css 官网地址：https://animate.style/ 下载好文件了以后 将文件引入 官方有介绍三种引入方式 这里我就给大家介绍一种 <link rel="stylesheet" href="css/animate-4.1.0.min.css"> 第二步. 给指定的元素加上指定的动画样式名 第一个animate__animated是必须添加的样式名，第二个是指定的动画样式名
vue animate.css 使用方法
最新发布
06-28
### 回答1： Vue Animate.css 是一个 Vue.js 的插件，它可以让你轻松地在 Vue.js 应用程序中使用 Animate.css 动画库。使用 Vue Animate.css，你可以通过简单的指令来添加动画效果，而不需要编写任何 JavaScript 代码。下面是使用 Vue Animate.css 的步骤： 1. 安装 Vue Animate.css 插件： ``` npm install vue-animate-css ``` 2. 在 Vue.js 应用程序中引入 Vue Animate.css 插件： ``` import Vue from 'vue' import VueAnimateCss from 'vue-animate-css' Vue.use(VueAnimateCss) ``` 3. 在 Vue.js 组件中使用指令来添加动画效果： ``` <template> <div v-animate="'bounce'">Hello, world!</div> </template> ``` 在上面的例子中，我们使用 `v-animate` 指令来添加 `bounce` 动画效果。你可以在 Vue Animate.css 文档中找到更多可用的动画效果。 希望这个回答能够帮助你！ ### 回答2： Vue animate.css是一款非常方便实现各种动画的工具。它是基于开源库animate.css开发而来，使得在Vue项目中使用动画效果变得更为便捷。 首先，在Vue项目中还需要安装vue-animate-css这个插件以便使用这款工具。可以使用npm包管理工具来安装它，输入以下命令然后等待安装完成。 npm install vue-animate-css --save 使用这个工具的方式通常有三种： 1. 以组件的方式使用： 在需要使用动画效果的组件内，引入vue-animate-css库并且设置样式class即可。例如： ``` <template> <div> <h1 :class="animatedClass">例子</h1> </div> </template> <script> import {hover, fadeIn} from 'vue-animate-css'; export default { data: () => ({ animatedClass: hover + ' ' + fadeIn }) } </script> ``` 2. 作为全局 mixin： 使用全局mixin方法后，在整个Vue项目内都可以方便地使用动画效果。比如： ``` import Vue from 'vue'; import {bounce} from 'vue-animate-css'; Vue.mixin({ methods: { bounce: bounce } }); ``` 在使用时只需要在需要使用效果的元素上添加样式类名即可。 3. 通过指令使用： 通过指令使用在有些情况下更为直观。在使用前需要先在Vue项目中引入animate.css库。比如： ``` import 'animate.css/animate.min.css'; import Vue from 'vue'; Vue.use({ install(Vue) { Vue.directive('animate', { inserted: (el, binding) => { el.addEventListener('animationend', () => { el.classList.remove(binding.value, 'animated'); }); el.classList.add('animated', binding.value); } }); } }); ``` 在使用指令的组件中，可以在需要使用动画效果的元素上添加v-animate指令，比如： ``` <template> <div> <h1 v-animate="'bounce'">例子</h1> </div> </template> ``` 这样就可以实现元素在页面加载时弹跳一次的效果。 总的来说，vue animate.css是一个非常实用的库，可以便捷地实现各种动画效果。具体使用方法可以根据自己的项目需求来灵活运用。 ### 回答3： Vue animate.css是一款能够为Vue应用程序添加动画效果的插件。它通过使用animate.css框架中的动画类名称，实现了Vue动态展示元素的效果。使用Vue animate.css可以省去手写CSS或Javascript动画的烦琐操作，同时可以方便地实现页面元素的动态效果，提升用户体验。 Vue animate.css的使用方法如下： 1. 安装Vue animate.css插件，在命令行中运行以下命令： ``` npm install vue-animate-css --save ``` 2. 在Vue组件中引入vue-animate-css的插件： ``` import VueAnimateCss from 'vue-animate-css'; Vue.use(VueAnimateCss); ``` 3. 在组件的模板中添加需要动画效果的元素，并绑定动画类名称： ``` <template> <div> <h1 v-animate-css="'bounceIn'" class="animated">{{ message }}</h1> </div> </template> ``` 4. 在组件的样式表中引入animate.css框架，并为绑定动画类名称的元素添加相应的样式： ``` <style> @import "animate.css"; .animated { animation-duration: 1s; } </style> ``` 5. 在运行应用程序时，就可以看到具有动态效果的元素了。 在以上的使用方法中，v-animate-css即为绑定动画类名称的指令，'bounceIn'为animate.css框架中的一个动画类名称，可以根据需要自由更换。同时，样式表中的animation-duration属性可控制动画持续的时间。 总之，使用Vue animate.css可以在Vue应用程序中方便地实现动态效果，增强用户体验，并且简化了开发人员的操作。但需要注意的是，为了保证页面的性能，应适度使用动画效果，以避免过度设计的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值