uni-app（三）----导入css动画库

最新推荐文章于 2025-04-16 17:52:24 发布
最新推荐文章于 2025-04-16 17:52:24 发布
阅读量902 收藏 1
点赞数 2
分类专栏： uni-app 文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43844418/article/details/109059982
版权
本文介绍了如何在uni-app中引入和使用css动画库Animate.css，包括从官方下载、在App.vue中导入、删除前缀以实现动画效果，以及如何设置延迟动画和调整动画速度。通过实例展示了在项目中添加动画效果的步骤，并强调了查阅开发文档的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们在开发程序的时候多多少少肯定会有一些动画效果的，那我们要如何去弄这些动画呢

uni-app引入css动画Animate.css库

首先我们可以去官网下载

在这里我直接有个下载好了的
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

打开网址之后另存到桌面就好
在这里插入图片描述

刚下载之后不是这个名字的，记得要改！！

下载好之后，我们就把它复制好，然后在项目里的common里粘贴好。
在这里插入图片描述
然后记得在App.vue里面导入
在这里插入图片描述
接下来就可以在项目中使用啦

最低0.47元/天 解锁文章
uniapp纯CSS3渐变线条脉冲动画效果
outsider76557的博客
09-14 1338
纯css3定制线条脉冲动图，记录边框渐变，背景渐变变化，干货满满。
animate.css-uni-app动画样式文件
11-04
总的来说，Animate.css与uni-app的结合使用，既提供了丰富的动画库，又利用了uni-app的跨平台能力，让开发者能轻松地在移动应用中创建出富有动感和视觉吸引力的用户体验。无论是新手还是经验丰富的开发者，都能从中...
uni-app 使用动画 css 库(Animate) Animate.css
热门推荐
以后永远的博客
01-18 1万+
新手uni-app引入css3动画Animate.css库，animate.css是一堆很酷，有趣且跨浏览器的动画，供您在项目中使用。非常适合强调，主页，滑块和一般的加水效果，官方没有对它进行太多的说明，目前版本为3.7.2 ，动画库的使用方式很简单。详细说明使用教程以及如何设置动画快慢以及延迟 新手uni-app引入css3动画Animate.css库 新地址 在这里下载 https://cdn...
Lottie：让 uniapp 动画更简单流畅
最新发布
qq_44358755的博客
04-16 544
uniapp 高性能动画 Lottie
uni-app 使用动画库animate
qq_41578884的博客
08-26 2894
1.创建animate.css并将下列动画库css复制：演示下载地址 @charset "UTF-8";/*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software an
uniapp animate(css)动画库的使用
qq_48596260的博客
01-08 973
uniapp animate(css)动画库的使用
uniapp 引入 Animate.css动画库
Bi-Hu的博客
09-27 355
其实很简单 下载 引入 使用即可。 下载： https://animate.style/ 引入： 使用： 非常简单！
短视频uni-app案例
08-18
uni-app的灵活性和强大的组件库使得开发者能够快速搭建功能丰富的应用。 【标签】"uni-app"是关键的开发工具，它是滴滴出行推出的一款跨平台开发框架，旨在简化移动应用的开发流程。"短视频"表明我们将关注的是...
微信小程序-uni-app实现案例.zip
10-27
5. **动画效果**：uni-app支持CSS3动画和JavaScript动画，可以创建丰富的交互效果。 6. **微信小程序特有功能**：例如使用微信登录授权、微信支付等微信提供的原生服务。 7. **错误处理和调试**：uni-app提供了...
uni-app案例 仿微信页面（无响应）
06-16
在移动应用开发领域，uni-app是一个备受开发者欢迎的跨平台框架，它允许开发者使用一套代码库来构建iOS、Android、H5、小程序等多个平台的应用。本案例将探讨如何使用uni-app来模仿微信的页面设计，但描述中提到的...
uniapp引用animate.css动画库
weixin_45915243的博客
03-17 3810
1.安装animate.css $ npm install animate.css --save 2.全局挂载 //app.vue @import 'animate.css' 3.在页面中使用 在view中的class添加animate__animated 以及动画名 需要加上animate_ 的前缀 <view class="animate__animated animate__bounceIn" ></view> 4.tips：我在使用时发现这样写并没
uni-app引入Animate.css动画库
qq_43628847的博客
09-18 1015
1.下载css文件 下载地址. http://www.haorooms.com/uploads/example/Animatecss/ 我尝试用 npm install animate.css --save 尝试了之后，发现好像没用，后面直接下载Animate.css文件，放在项目中，可以正常使用 2.在app.vue中引入 @import url("./common/animate.css’"); 3.使用 An animated element An animated element 我发现用hov
【uni-app】uni-app关于使用animate.css的演示和使用
坚持不懈 一往无前
05-24 1367
下面是关于使用animate.css的演示和使用 /* hover-class就是动画的类，class是固定使用animated */ <view class="animated" hover-class="bounce"> <view>内容</view> </view> 演示的Demo在下面gitee里 gitee地址：https://gitee.com/gongjs/animate.git 附上截图一张，自己写的一个demo，喜欢的点个收藏，谢谢谢谢~
uniapp使用动画 css 库( Animate.css )
qq_43609453的博客
03-25 2547
@[TOC](uniapp使用动画 css 库( Animate.css )) https://animate.style/ https://daneden.github.io/animate.css/ 1、下载Animate.css 文件 https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css （3.7.2） https://cdnjs.cloudflare.com/ajax/libs/animate.c
uni-app使用CSS实现无限旋转动画
培根芝士的专栏
09-15 1988
本来想用uni.createAnimation创建一个旋转动画，发现转完一圈后就不动了，没法循环旋转，最后采用了下面的这种方式，直接用CSS来实现循环旋转动画。
uniapp使用css方法来实现盒子的放大再到缩小动画
m0_65069237的博客
08-15 1290
代表的意思是设置动画的名字叫做：name 一次循环的时间是0.75秒，infinite：无限循环。图片路径可以自己找其他的图片来代替即可。
uni-app——引入animate动画库
qq_43201350的博客
02-05 1415
一、下载阿里字体图标 1、找到我的项目——font class ——点击生成的链接右键——转到 2、全选保存为一个css文件，这里我把它命名为icon.css 3、在项目根目录下新建common文件夹，并把icon.css复制过来 二、在style引入并使用 1、在app.vue中全局引入 2、使用 <view class="iconfont iconfaqiliaotian" style="color: red;font-size: 60upx;"></view> .
uniapp动画
一粒程序米
02-10 4007
效果图 代码： <template> <view> <view class="circle" :animation="animationData" @click="turn" > {{tips}} </view> </view> </template> <script> export default { data() { return { animationData: {},
css制作uni-app旋转动画及旋转暂停/开始
2301_77500525的博客
12-23 1196
暂停/开始旋转动画是通过：animation-play-state: paused;来控制暂停的，设置animation后默认是有旋转动画的，所以没有写开始旋转的代码（animation-play-state: running;表示开始旋转动画），通过。css用animation可以制作旋转动画。
uni-app动画样式库：animate.css使用指南
资源摘要信息:"animate.css 是一套流行的跨浏览器 CSS 动画库，它使得为网页元素添加动画效果变得轻而易举。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一套代码，同时发布到iOS、Android...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值