css 过渡动画

news2024/11/22 7:06:16

目录

  • 过渡动画
  • 1 css 属性
    • 1.1 transform 变换（平移旋转缩放）
    • 1.2 animation 动画
      • 1.2.1 keyframes
    • 1.3 transition 过渡
    • 1.4 比较
  • 2 方式
    • 2.1 css 伪类
    • 2.2 vue <Transition> 组件
      • 2.2.1 默认名称
      • 2.2.2 自定义名称
      • 2.2.3 自定义 class
      • 2.2.4 配合 animation
      • 2.2.5 多层
      • 2.2.6 封装
    • 2.3 vue <TransitionGroup> 组件
      • 2.3.1 示例列表
    • 2.4 class 变化
      • 2.4.1 点击旋转
      • 2.4.2 点击持续旋转
      • 2.4.3 点击折叠收起
  • 3 效果
    • 3.1 淡入（fade in）
    • 3.2 上浮（fade up）
    • 3.3 左右摆动（wiggle）
    • 3.4 上下弹跳（bounceAround）
  • 4 性能考量

过渡动画

不加过渡动画，变化不太流畅

1 css 属性

MDN css transitions

1.1 transform 变换（平移旋转缩放）

w3school transform

  • transform：用于元素的变形，显示变形后的状态，不是变形的过程，变形过程需要配合transition表示
    • 2D 转换
      • translate(50px, 100px) 平移
      • rotate(20deg) 顺时针旋转 20 度
      • rotateX(150deg) 绕其 X 轴旋转给定角度
      • scaleX(2) 增大为其原始宽度的两倍
      • scaleY(0.5) 缩减为其原始高度的一半
      • scale(2, 3) 增大为其原始宽度的两倍和其原始高度的三倍
      • skewX(20deg) 沿 X 轴倾斜 20 度
      • skewY(20deg) 沿 Y 轴倾斜 20 度
      • skew(20deg, 10deg) 沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度
      • matrix() 方法把所有 2D 变换方法组合为一个
        • matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
        • transform: matrix(1, -0.3, 0, 1, 0, 0);
函数描述函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。translate3d(x,y,z)定义 3D 转化。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。scale3d(x,y,z)定义 3D 缩放转换。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(n)定义 2D 缩放转换，改变元素的高度。scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate(angle)定义 2D 旋转，在参数中规定角度。rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。
perspective(n)定义 3D 转换元素的透视视图。

1.2 animation 动画

w3school animation

animation: [ * animation-name] [ * animation-duration]
  [animation-timing-function] [animation-delay] [animation-iteration-count]
  [animation-direction] [animation-fill-mode] [animation-play-state];
  • animation：动画
    • *animation-name：关键帧的名字，该参数必需。
    • *animation-duration：动画持续的时间，该参数必需。
    • animation-timing-function：定时器函数，默认是ease。
    • animation-delay：动画效果多少秒后开始，默认为0。
    • animation-iteration-count：动画重复的次数，可以指定为一个整数，表示多少次，默认值是infinite关键字，表示无限次。
    • animation-direction：动画方向，可能的值为forward、backward或alternating，默认值为normal。
    • animation-fill-mode：默认值为none。
    • animation-play-state：动画默认是否生效，默认值为running。

1.2.1 keyframes

MDN keyframes

  • 关键帧 @keyframes 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。
@keyframes myname {
  0% {
    top: 0px;
  }
  25% {
    top: 200px;
  }
  50% {
    top: 100px;
  }
  75% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}

keyframes rotation {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(450deg);
  }
}

1.3 transition 过渡

transition: [ * transition-property] [ * transition-duration]
  [transition-timing-function] [transition-delay];
  • transition: 该状态变至其他状态的过渡过程
    • 单个属性：transition: background-color 2s;
    • 多个属性：
      • transition: background-color 2s, height 1s ease-in-out;
      • transition: width 2s, height 2s, transform 2s;
  • transition-property: 元素的哪一个 CSS 属性需要过渡效果，该参数必需
    • all：全部属性
  • transition-duration: 过渡效果的持续时间，该参数必需
  • transition-timing-function: 定时函数，默认是ease
    • linear：线性运行，各个时刻速度都一样。
    • ease: 快速加速，然后逐渐减速，CSS 的默认值。
    • ease-in：逐渐加速，结尾时变快，适用于退出页面显示的元素。
    • ease-out：开始时速度最快，然后逐渐慢下来，适用于进入页面显示的元素。
    • ease-in-out：主键加速然后变慢，与ease相似，但开始时加速较慢，适合那些在页面有着明确开始和结束的动画。
  • transition-delay: 过渡从多少秒以后开始，默认是0

1.4 比较

  • animation 强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和 @keyframes结合使用）

  • transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，

    • 而第二个途径当某种改变发生（例如 hover）时才能获取样式，这样就会产生过渡动画。
    • 可以认为它有两个关键帧的 animation

  • 状态 a -> b：

    • width: 100->300
    • transition: width 2s;

  • 状态 b -> a：

    • width: 300->100
    • transition: width 6s;
a {
  width: 100px;
  transition: width 2s;
}

b {
  width: 300px;
  transition: width 6s;
}

2 方式

2.1 css 伪类

w3school css 过渡

  • 常需要应用过渡动画的伪类选择器

    • :hover 当用户悬浮到一个元素之上的时候匹配。
    • :active 在用户激活（例如点击）元素的时候匹配，点击时应用，松开就结束

  • 原选择器：过渡前的状态、过渡的过程（该状态变至其他状态的过渡过程）

  • 伪类选择器：过渡后的状态（可以只写有变更的样式）

/* 把鼠标悬停在 div 元素上，宽度变宽的过渡效果 */
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

2.2 vue 组件

vue Transition

  • <Transition> 是一个内置组件
  • 进入或离开可以由以下的条件之一触发
    • 由 v-if 所触发的切换
    • 由 v-show 所触发的切换
    • 由特殊元素 <component> 切换的动态组件

在这里插入图片描述

  • v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
  • v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
  • v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
  • v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
  • v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
  • v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

2.2.1 默认名称

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

2.2.2 自定义名称

<Transition name="fade"> ... </Transition>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

2.2.3 自定义 class

<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

2.2.4 配合 animation

<Transition name="bounce">
  <p v-if="show" style="text-align: center;">Hello here is some bouncy text!</p>
</Transition>

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

2.2.5 多层

尽管过渡 class 仅能应用在 的直接子元素上，我们还是可以使用深层级的 CSS 选择器，在深层级的元素上触发过渡效果

在这种情况下，你可以通过向 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间

2.2.6 封装

<!-- MyTransition.vue -->
<script>
  // JavaScript 钩子逻辑...
</script>

<template>
  <!-- 包装内置的 Transition 组件 -->
  <Transition name="my-transition" @enter="onEnter" @leave="onLeave">
    <slot></slot>
    <!-- 向内传递插槽内容 -->
  </Transition>
</template>

<style>
  /*
  必要的 CSS...
  注意：避免在这里使用 <style scoped>
  因为那不会应用到插槽内容上
*/
</style>

2.3 vue 组件

是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

2.3.1 示例列表

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">{{ item }}</li>
</TransitionGroup>

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

2.4 class 变化

过渡动画的 css 可以另起一个 css 文件书写

vue 点击图标旋转

2.4.1 点击旋转

<style lang="css" scoped>
  .a {
    transition: all 2s;
  }
  .g {
    transform: rotate(-180deg);
    transition: all 2s;
  }
</style>
<template>
  <div>
    <a-icon type="up" :class="[state?'g':'a']" @click="Change" />
    //class随state的true或者false改变
  </div>
</template>
<script>
  export default {
    data() {
      return {
        state: false,
      };
    },
    methods: {
      Change() {
        this.state = !this.state;
        console.log(this.state);
      },
    },
  };
</script>

2.4.2 点击持续旋转

<uni-icons
  :class="{ rotation: rotation }"
  type="refreshempty"
  @click="onRefresh"
/>

<script>
  const rotation = ref(false);

  const onRefresh = () => {
    rotation.value = !rotation.value;
  };
</script>

// 持续旋转
.rotation {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

2.4.3 点击折叠收起

<scroll-view class="scroll" v-if="isShow" scroll-y></scroll-view>

把 v-if 改为两种 class 的转变，再加上过渡

<scroll-view
  class="scroll"
  :class="[isShow ? 'scroll--full' : 'scroll--null']"
  scroll-y
></scroll-view>

.scroll {
  box-sizing: border-box;
  width: 440rpx;
  font-weight: 300;
  background: #ffffff;
  border-radius: 5px;
  border: 1rpx solid;

  transition-property: all;
  transition-duration: 0.1s;
}

.scroll--full {
  border-color: #999999;
  max-height: 155rpx;
}

.scroll--null {
  border-color: #ffffff;
  max-height: 0rpx;
}

3 效果

  • 下拉选择
    • 下拉框：展开
    • 下拉箭头：旋转
  • 弹窗：缩放、淡入淡出
  • 增删：移走

3.1 淡入（fade in）

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  animation: fade-in 1s forwards linear;
}

/* 淡入淡出 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

3.2 上浮（fade up）

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(3em);
  }
  100% {
    opacity: 1;
    transform: translateY(none);
  }
}
.fade-up {
  animation: fade-up 3s cubic-bezier(0.05, 0.98, 0.17, 0.97) forwards;
}

3.3 左右摆动（wiggle）

@keyframes wiggle {
  0%,
  7% {
    transform: rotateZ(0);
    opacity: 0;
  }
  15% {
    transform: rotateZ(-15deg);
    opacity: 1;
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}

3.4 上下弹跳（bounceAround）

.animation {
	…
	animation: bounceAround 1.1s ease-in-out infinite;
}

@keyframes bounceAround {
	0% {transform:translateY(0);}
	20% {transform:translateY(-60px) rotate(0deg);}
	25%{transform:translateY(20px) rotate(0deg);}
	35%, 55%{transform:translateY(0px) rotate(0deg);}
	60% {transform: translateY(-20px) rotate(0deg);}
	100%{transform: translateY(-20px) rotate(360deg);}
}

4 性能考量

CSS 制作动画属性大多是 transform 和 opacity 之类的。用这些属性制作动画非常高效，因为：
他们在动画过程中不会影响到 DOM 结构，因此不会每一帧都触发昂贵的 CSS 布局重新计算。
大多数的现代浏览器都可以在执行 transform 动画时利用 GPU 进行硬件加速。
相比之下，像 height 或者 margin 这样的属性会触发 CSS 布局变动，因此执行它们的动画效果更昂贵，需要谨慎使用。我们可以在 CSS-Triggers 这类的网站查询哪些属性会在执行动画时触发 CSS 布局变动。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

sqlserver存储过程简单游标示例

sqlserver存储过程简单游标示例

test数据库有表如下&#xff1b; 创建一个存储过程&#xff0c;输出姓名和电话&#xff1b; CREATE PROCEDURE printname AS BEGINDECLARE sName varchar(20), phone varchar(20)DECLARE cursor1 CURSOR FOR --定义游标SELECT name,phonenumber from t_student OPEN cursor1 …
阅读更多...
OpenStack的“神秘组件” 裸金属(Ironic)管理使用

OpenStack的“神秘组件” 裸金属(Ironic)管理使用

OpenStack是目前全球部署最广泛的开源云基础架构&#xff0c;在OpenStack中提供的裸金属服务的项目是Ironic。OpenStack的官网主要介绍裸金属的用途在如下5方面&#xff1a; &#xff08;1&#xff09;高性能计算&#xff1b; &#xff08;2&#xff09;无法虚拟化的硬件设备的…
阅读更多...
DSVW通关教程

DSVW通关教程

DSVW通关教程 首先整体浏览网站 Blind SQL Injection (boolean) 基于布尔型的盲注: HTTP请求的响应体中不会明确的返回SQL的错误信息, 当把参数送入程序查询时&#xff0c;并且在查询条件为真的情况下返回正常页面&#xff0c;条件为假时程序会重定向到或者返回一个自定义的错…
阅读更多...
GICv3 基本规则

GICv3 基本规则

目录 1.中断类型 1.1中断标识符 1.2中断如何发送给中断控制器 二、中断状态机 2.1 电平触发 2.2 边沿触发 三、亲和性路由 四、安全模型 4.1 对软件的影响 4.2 对单一安全状态的支持 五、编程模型 本章介绍了符合GICv3架构的中断控制器的基本操作。它还描述了不同…
阅读更多...
R语言与数据分析—上（篇幅长，全）

R语言与数据分析—上（篇幅长，全）

内容过长但详细&#xff0c;分三篇写&#xff0c;总结分享也供日后参考回顾一、什么是R语言R是免费的&#xff0c;是一个全面的统计研究平台&#xff0c;提供了各式各样的数据分析技术&#xff0c;R拥有顶尖的绘图功能二、R语言优点和缺点优点1、有效的数据处理和保存机制2、拥…
阅读更多...
LwIP系列--数据包处理和PBUF结构详解

LwIP系列--数据包处理和PBUF结构详解

一、目的在之前的博文中我们介绍了LwIP中的内存堆和内存池实现细节以及它们之间的优缺点对比。本篇我们将介绍LwIP中另一个比较重要的知识点&#xff0c;即数据包管理和PBUF结构&#xff1b;个人认为PBUF的设计是LwIP整个源码的亮点之一&#xff08;充分考虑了数据包处理的高效…
阅读更多...
泛微发布数字化营销管理平台-九川汇

泛微发布数字化营销管理平台-九川汇

泛微全程数字化营销管理平台——九川汇&#xff0c;对内可以跨部门、跨组织高效协同&#xff0c;对外借助企业微信快速连接客户。 营销活动是企业运营中重要的一环&#xff0c;数字化工具如何满足企业的营销管理需求&#xff1a; 1、如何有效助力销售活动&#xff1a;帮助销售…
阅读更多...
WebServer重写（一）：日志库双缓冲和阻塞队列压测对比

WebServer重写（一）：日志库双缓冲和阻塞队列压测对比

目录前言重构动机模块介绍FileUtil&#xff0c;LogFile&#xff0c;LogStream&#xff0c;LoggingAsyncLogging&#xff08;重要&#xff09;压测源码前言 上次参考TinyWebserver的实现思路是&#xff1a;实现一个blockQueue, 然后实现一个日志接口类&#xff0c;这个接口类承…
阅读更多...
ROS小车研究笔记1/31/2023 小车硬件结构及键盘移动控制节点

ROS小车研究笔记1/31/2023 小车硬件结构及键盘移动控制节点

1 小车硬件结构 1 中控设备 上方的单片机用于控制电机运动&#xff0c;搭载wifi模块和电量显示屏。下方为树莓派&#xff0c;安装了ROS系统和Ubuntu系统&#xff0c;用于整个小车控制。显示屏和树莓派相连 2 传感器系统 激光雷达及转换器。激光雷达和转换器相连&#xff0…
阅读更多...
【Rust】7. 枚举和模式匹配

【Rust】7. 枚举和模式匹配

7.1 枚举&#xff08;可存储不同类型的值&#xff09; 7.1.1 基本概念 7.1.2 枚举的简洁用法&#xff1a;构造函数 7.1.3 枚举的优势&#xff1a;处理不同类型和数量的数据 枚举成员的类型&#xff1a;字符串、数字类型、结构体、枚举注意&#xff1a;在未将标准库枚举引入当…
阅读更多...
Java——两两交换链表中的节点

Java——两两交换链表中的节点

题目链接 leetcode在线oj题——两两交换链表中的节点 题目描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 题目示例 …
阅读更多...
Vue中的$children与$parent讲解

Vue中的$children与$parent讲解

$children与$parent直接演示代码父组件&#xff1a;<template><div><h2>BABA有存款: {{ money }}</h2><button>找小明借钱100</button><br /><button>找小红借钱150</button><br /><button>找所有孩子借钱2…
阅读更多...
Day875.怎么给字符串字段加索引 -MySQL实战

Day875.怎么给字符串字段加索引 -MySQL实战

怎么给字符串字段加索引 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于怎么给字符串字段加索引的内容。 现在&#xff0c;几乎所有的系统都支持邮箱登录&#xff0c;如何在邮箱这样的字段上建立合理的索引。 假设&#xff0c;现在维护一个支持邮箱登录的系统&…
阅读更多...
【计算机图形学(译）】 一、介绍

【计算机图形学(译）】 一、介绍

【计算机图形学(译&#xff09;】 一、介绍1 介绍 Introduction1.1 图形领域 (Graphics Areas)1.2 主要应用 (Major Applications)1.3 图形APls (Graphics APIs)1.4 图形管线 (Graphics Pinpline)1.5 数值问题 (Numerical Issues)1.6 效率 (Efficiency)1.7 设计和编写图形程序 …
阅读更多...
Detectron2部署教程，着重ONNX（从官网翻译）

Detectron2部署教程，着重ONNX（从官网翻译）

本教程翻译至这里 https://detectron2.readthedocs.io/en/latest/tutorials/deployment.html detectron2模型训练以后如果想要部署&#xff0c;就需要导出专门的模型才可以。 三种模型导出方式 detectron2支持的模型导出方式有&#xff1a; tracing 该方式导出的格式是Torch…
阅读更多...
常量池/String常见面试题

常量池/String常见面试题

目录 常量池与运行时常量池 字符串常量池String_Table 字符串变量拼接 字符串常量拼接 字符串延迟加载 字符串intern方法 总结StringTable的特点 常量池与运行时常量池 二进制字节码包括 类的基本信息,常量池,类方法定义(包含虚拟机指令) class文件中除了有类的版本,字…
阅读更多...
新突破：科学家发现全新的量子纠缠效应

新突破：科学家发现全新的量子纠缠效应

布鲁克海文国家实验室&#xff08;图片来源&#xff1a;网络&#xff09;布鲁克海文国家实验室的科学家发现了一种全新的量子纠缠效应&#xff0c;即使宇宙距离相隔广阔&#xff0c;量子纠缠也会使粒子奇迹般地联系在一起。这一发现使他们能够捕捉到原子内部的奇特世界。这项研…
阅读更多...
【算法自由之路】二叉树的递归套路

【算法自由之路】二叉树的递归套路

【算法自由之路】二叉树的递归套路 预热&#xff0c;二叉树的后继节点 话不多说&#xff0c;首先是一道练手题&#xff0c;寻找二叉树任意给定节点的后继节点&#xff0c;此二叉树具备一个指向父节点的指针。 后继节点&#xff1a;在中序遍历中于给定节点后一个打印的节点 p…
阅读更多...
SpringBoot实现配置文件的加密和解密

SpringBoot实现配置文件的加密和解密

一、项目搭建 1.新建一个springBoot项目 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocatio…
阅读更多...
DAMO-YOLO : A Report on Real-Time Object Detection Design

DAMO-YOLO : A Report on Real-Time Object Detection Design

DAMO-YOLO:实时目标检测设计报告在本报告中&#xff0c;我们提出了一种被称为DAMO-YOLO的快速准确的物体检测方法&#xff0c;该方法比最先进的YOLO系列具有更高的性能。DAMO-YOLO是由YOLO扩展而来的&#xff0c;它采用了一些新技术&#xff0c;包括神经结构搜索(NAS)、高效的重…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023