uniapp使用colorUI

colorUI

微动画 | ColorUI 使用文档

1:把colorui里三个文件复制到自己项目中去

App.vue

</script>
<style>
@import url('colorui/icon.css');
@import url('colorui/main.css');
@import url("colorui/animation.css");@-webkit-keyframes show {0% {transform: translateY(-50px);}60% {transform: translateY(40upx);}100% {transform: translateY(0px);}}
</style>

 

具体来说,这个动画包含以下关键帧:

  • 0%:动画开始时,元素的位置会沿着Y轴向上移动50像素。这是通过transform: translateY(-50px);实现的。
  • 60%:动画进行到60%时,元素的位置会沿着Y轴向上移动40像素。这是通过transform: translateY(40upx);实现的。这里的upx表示单位为像素,所以实际移动的距离是40像素。
  • 100%:动画结束时,元素的位置会回到原始位置,即Y轴上不移动。这是通过transform: translateY(0px);实现的。

通过使用这个动画,你可以控制元素的显示效果,例如使其逐渐出现或向下移动。

2:想要的c复制到自己的项目中

例如:

//动画<div v-for="(item,index) in 10" :key="index" class="box" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"></div>//渐显<button class="cu-btn margin-sm basis-sm shadow animation-scale-up" style="animation-delay: 0.2s;animation-duration: 1.2s;animation-timing-function:ease"
>111</button>

以下是一些常用的动画CSS属性:

  1. animation-name: 指定要应用的动画名称。
  2. animation-duration: 设置动画的持续时间,以秒(s)或毫秒(ms)为单位。
  3. animation-timing-function: 定义动画的速度曲线,如线性、缓动、加速等。
  4. animation-delay: 设置动画开始前的延迟时间,以秒(s)或毫秒(ms)为单位。
  5. animation-iteration-count: 定义动画的迭代次数,可以是固定次数(如1、2、3...),也可以是无限循环(如infinite)。
  6. animation-direction: 控制动画的方向,可以是正向播放(normal)、反向播放(reverse)或来回播放(alternate)。
  7. animation-fill-mode: 定义动画在结束后的状态,可以是保持最后帧(forwards)、回到初始状态(backwards)或两者兼有(both)。
  8. animation-play-state: 控制动画是否正在运行或暂停。
  9. animation: 是一个简写属性,用于一次性设置以上所有动画属性。

这些属性可以组合使用,以创建各种复杂的动画效果。通过调整这些属性的值和取值范围,可以实现不同的动画效果和行为。

animation-timing-function属性用于定义动画的速度曲线,即动画的缓动效果。它接受一个或多个值来描述动画的速度变化过程。

常用的缓动函数有以下几个:

  1. linear: 表示动画以恒定速度进行,没有加速和减速的过程。
  2. ease: 表示动画以慢速开始,然后逐渐加速,最后以慢速结束。
  3. ease-in: 表示动画以慢速开始,然后逐渐加速。
  4. ease-out: 表示动画以慢速结束,然后逐渐减速。
  5. ease-in-out: 表示动画以慢速开始和结束,然后逐渐加速和减速。
  6. cubic-bezier(x1, y1, x2, y2): 使用贝塞尔曲线定义自定义的缓动函数,其中x1、y1、x2、y2是控制点坐标。

通过调整这些缓动函数的值,可以创建不同的动画效果,如平滑过渡、跳跃式变化等。

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

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

相关文章

Struts2 S2-061 远程命令执行漏洞(CVE-2020-17530)复现

漏洞简介 Struts2框架是一个用于开发Java EE网络应用程序的开放源代码网页应用程序架构。它利用并延伸了Java Servlet API&#xff0c;鼓励开发者采用MVC架构。Struts2以WebWork优秀的设计思想为核心&#xff0c;吸收了Struts框架的部分优点&#xff0c;提供了一个更加整洁的MV…

GIT 常用命令整理

一、暂存文件 1. 添加指定文件到暂存区&#xff1a;git add [file1] [file2] ... 2. 添加指定目录到暂存区&#xff0c;包括子目录&#xff1a;git add [dir] 3. 添加当前目录的所有文件到暂存区&#xff1a;git add . 4. 添加每个变化前&#xff0c;都会要求确认&#x…

心有暖阳,笃定前行,2024考研加油

2024考研学子&#xff0c;所有的付出终有收获&#xff0c;阳光终将穿透阴霾&#xff0c;终将上岸。 当曙光破晓的时候&#xff0c;你可曾记得那些星月为伴&#xff0c;孤独为友&#xff0c;理想为灯来指引前行之路的日子&#xff0c;那些默默扎根的日子终将化作星星在未来闪闪发…

力扣55. 跳跃游戏

贪心算法 思路&#xff1a; 当前所在位置 pos&#xff0c;能够到达的最远位置为 pos nums[pos]&#xff1b;如果最远位置能到达边界即能够跳出圈&#xff1a; if (rightmost > size - 1) { return true; } 在能跳跃范围内&#xff08;idx < rightmost&#xff09;更新能…

Java项目-瑞吉外卖项目优化Day3

前后端分离开发 Yapi 是一个接口结合了接口测试、接口管理的管理平台&#xff0c;需要配置比较麻烦。看弹幕说用apifox更好用。可以将接口文档导出导入。 Swagger 注意下面的地址前面要有/。 效果&#xff1a; 可以在这里实现接口的测试&#xff0c;也可以导出文档等等。一般…

【ES实战】Elacticsearch6开始的CCR的实践

Elacticsearch6的CCR的实践 文章目录 Elacticsearch6的CCR的实践基本流程CCR应用场景分析容灾备份场景单一容灾数据中心多地容灾数据中心遗留问题 数据本地化 基本流程 CCR 的主从索引的建立流程 #mermaid-svg-wKXpsIBIF6FLy5uz {font-family:"trebuchet ms",verdan…

前端与后端的异步编排(promise、async、await 、CompletableFuture)

前端与后端的异步编排 文章目录 前端与后端的异步编排1、为什么需要异步编排2、前端中的异步2.1 、Promise的使用2.1.1、Promise的基础概念2.1.2、Promise中的两个回调函数2.1.3、工具方法1、Promise.all(&#xff09;2、Promise.race()3、Promise.resolve() 2.2 、async 与 aw…

python+django教学质量评价系统o8x1z

本基于web的在线教学质量评价系统的设计与实现有管理员&#xff0c;教师&#xff0c;督导&#xff0c;学生一共四个角色。管理员功能有个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;督导管理&#xff0c;学生评价管理&#xff0c;课程信息管理&#xff0c;学生…

生产者和消费者模式

在一个系统中&#xff0c;存在生产者和消费者两种角色&#xff0c;他们通过内存缓冲区进行通信&#xff0c;生产者生产消费者需要的资料&#xff0c;消费者把资料做成产品。 最关键就是内存缓冲区为空的时候消费者必须等待&#xff0c;而内存缓冲区满的时候&#xff0c;生产者…

编译原理----算符优先级的分析(自底向上)

自底向上分析的分类如下所示&#xff1a; 算符优先分析 算符优先分析只规定算符之间的优先关系&#xff0c;也就是只考虑终结符之间的优先关系。 &#xff08;一&#xff09;若有文法G&#xff0c;如果G没有形如A->..BC..的产生式&#xff0c;其中B和C为非终结符&#xff…

再谈观察者模式的具体应用,如监听一个class其中一个属性,如websocket中onmessage的实现

再谈观察者模式的具体应用&#xff0c;如监听一个class其中一个属性&#xff0c;如websocket中onmessage的实现 概述 在JavaScript中&#xff0c;观察者模式是一种设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象&…

springMVC-与spring整合

一、基本介绍 在项目开发中&#xff0c;spring管理的 Service和 Respository&#xff0c;SrpingMVC管理 Controller和ControllerAdvice,分工明确 当我们同时配置application.xml, springDispatcherServlet-servlet.xml , 那么注解的对象会被创建两次&#xff0c; 故…

freeswitch on debian docker

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 因为centos系统期限的原因&#xff0c;尝试在debian的docker上使用fs。 环境 docker engine&#xff1a;Version 24.0.6 debian docker&#xff1a;bullseye 11.8 freeswitch&#xff1a;v1.10.7 Debian准备 目前…

Pycharm报的一些Python语法错误

Pycharm报的一些Python语法错误 1、PEP8:Expected 2 blank less:found 1 意思是&#xff1a;类和上面的行要间隔两行&#xff0c;现在只有一行 解决办法&#xff1a; 间隔2行 2、Remove redundant parentheses 意思是&#xff1a;删除多余的括号 解决&#xff1a;删掉外面括…

LSTM和GRU vs 普通的循环神经网络RNN

1、考虑下列三种情况下&#xff0c;对比一下普通RNN的表现和LSTM和GRU表现&#xff1a; &#xff08;1&#xff09;早期观测值对预测未来观测者具有非常重要的意义。 考虑一个极端情况&#xff0c;其中第一个观测值包含一个校验和&#xff0c; 目标是在序列的末尾辨别校验和是…

应用案例 | 汽车行业基于3D机器视觉引导机器人上下料解决方案

Part.1 背景 近年来&#xff0c;汽车行业蓬勃发展&#xff0c;一度出现供不应求的现象。在汽车零配件、整车大规模制造的过程中&#xff0c;为了降本增效&#xff0c;提升产品质量&#xff0c;工厂急需完成自动化升级。随着人工智能的发展&#xff0c;越来越多的生产环节引入机…

C++(多态)

目录 前言&#xff1a; 1.多态的概念 2.多态的定义及实现 2.1多态的构成条件 2.2析构函数的重写&#xff08;基类与派生类析构函数名字不同&#xff09; 2.3虚函数重写 2.4C override 和final 2.5 重载、覆盖&#xff08;重写&#xff09;隐藏&#xff08;重定义&#…

css 设备背景图片 宽高总是不能平铺

宽高总是宽大了 高就挤出去了&#xff1b;高设置了 宽度就变小了&#xff1b;疯掉的节奏。。。。。。 .center-bottom{background: url(/img/newpic/leftbg.png);background-repeat: no-repeat;width: 98%;height: 60%;background-position: center center;background-size: 1…

各大高校科研工具链培训PPT汇总

各大高校科研工具链培训PPT汇总 RSS 北邮图书馆&#xff1a;通过RSS订阅高效获取信息、追踪研究前沿山东大学图书馆&#xff1a;如何追踪学科研究前沿苏大图书馆&#xff1a;个人知识管理软件的使用中科院图书馆&#xff1a;利用RSS与最新资讯同步 文献管理工具 中南大学图…

JAVA WEB用POI导出EXECL多个Sheet

前端方法&#xff1a;调用exportInfoPid这个方法并传入要查询的id即可&#xff0c;也可以用其他参数看个人需求 function exportInfoPid(id){window.location.href 服务地址"/exportMdsRoutePid/"id; } 后端控制层代码 Controller Scope("prototype") R…