CSS基础3

动画-animation

动画-animation与 transition过渡动画的区别

  •  transition过渡动画：实现两个状态间的变化过程
  • 动画animation：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

走马灯-使用transition.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box {width: 600px;height: 110px;border: 5px solid #000;margin: 100px auto;overflow: hidden;  /* .box父元素里的子元素的高度超出了父容器的高度 发生外溢   添加overflow: hidden超出规定宽高的(溢出)内容会被裁剪掉(不可见) */}/* ul里的所有子元素li都是 块级元素 垂直独占一行的 我们的要求是要让所有的子元素li水平排列 都在一行 给ul添加 弹性盒子属性 display: flex; */.box ul {background-color: pink;display: flex;transition: all 10s;}li {list-style: none;}/* img 是行内元素 设置宽高无效 转为块级元素 设置宽高有效 */img {display: block;width: 200px;}.box:hover ul {transform: translate(-1400px);      /* translate()只写一个值，表示沿着X轴水平方向移动  */}</style>
</head>
<body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 替身：填补显示区域的露白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div>
</body>
</html>

走马灯-使用animation.html

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box {width: 600px;height: 110px;border: 5px solid #000;margin: 100px auto;overflow: hidden;  /* .box父元素里的子元素ul的宽度高度(width: 800px; height: 210px;)超出了父容器的宽度高度(width: 600px;height: 110px;) 发生外溢   添加overflow: hidden将子元素ul  超出规定宽高的(溢出)内容会被裁剪掉(不可见) */}/* ul里的所有子元素li都是 块级元素 垂直独占一行的 我们的要求是要让所有的子元素li水平排列 都在一行 给ul添加 弹性盒子属性 display: flex; */.box ul {width: 800px;height: 210px;background-color: pink;display: flex;/* transition: all 10s; *//* 一进入界面执行动画: 10s完成一次移动动画:让ul元素向X轴从0左边负方向移动1400px。 无线循环 匀速 */animation: move 10s infinite linear ;     }li {list-style: none;}/* img 是行内元素 设置宽高无效 转为块级元素 设置宽高有效 */img {display: block;width: 200px;}/* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */@keyframes move {0% {transform: translate(0);  /* ul元素 开始不需要移动在X轴0位置   */}100% {transform: translate(-1400px);   /*    让ul元素    向X轴从0左边负方向移动1400pxtranslate()只写一个值，表示沿着X轴水平方向移动  */}}.box:hover ul {/* transform: translate(-1400px);      translate()只写一个值，表示沿着X轴水平方向移动  */animation-play-state: paused;}</style>
</head>
<body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li>  <!-- ​ 无缝动画填补空白区域 ​  替身：复制前3张图片到区域尾部,填补区域尾部的露白  --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li>   </ul></div>
</body>
</html>

 

 

无缝动画填补区域尾部空白：

为什么要使用无缝动画: 元素(图片)移动 在区域尾部有空白区域

无缝动画原理：复制开头图片到结尾位置 填补尾盘区域的空白区域,让元素(图片)累加宽度=区域宽度

<body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li>  <!-- ​ 无缝动画填补空白区域 ​  替身：复制前3张图片到区域尾部,填补区域尾部的露白  --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li>   </ul></div>
</body>

 实现动画animation的步骤:

1.定义动画的关键帧：使用 @keyframes 规则定义动画在不同阶段的样式。

@keyframes:

@keyframes 是用来指定 CSS 动画过程中，在特定时间点需要应用的样式规则。你可以在 @keyframes 内部定义动画序列中的关键帧（即动画的不同状态），然后浏览器会自动计算这些关键帧之间的过渡效果。

动画名称：

是用于标识这个动画的唯一名称，以便于在其他地方引用它。

这种格式只指定了动画的起点(from)和终点(to)的状态。

@keyframes 动画名称 {

from { width: 200px; }

to { width: 800px; }

} 

这种格式允许你更精确地控制动画过程中不同百分比处的状态，提供了更高的灵活性和控制力。

@keyframes 动画名称 {

0% { /* 起始状态 */ } 

20% { /* 中间某个时刻的状态 */ }

...

100% { /* 结束状态 */ }

}

2.应用动画到元素上：通过 animation 属性将定义好的动画应用到特定的 HTML 元素上，并设置相关的属性如持续时间、播放次数等。

最全版不是所有的属性都必须填写 
animation: animation-name      动画名称animation-duration  动画时长animation-timing-function 速度曲线 animation-delay     延迟时间animation-iteration-count   重复次数animation-direction   动画方向animation-fill-mode;  执行完毕时状态
animation:动画名称 动画花费时长;(最简版这2个属性必须填写)

注意:

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
属性作用取值
animation-name

动画名称

定义要使用的 @keyframes 动画名称

必需
animation-duration

动画时长

动画完成一个周期所需的时间（如 2s）

必需
animation-delay

延迟时间

动画开始前的延迟时间（可为负值）

animation-fill-mode

动画执行完毕时的状态

 none（不保留任何样式）
forwards（保留最后一帧样式）
backwards（保留第一帧样式）
both（同时保留首尾帧样式）

animation-timing-function

动画的速度曲线（缓动函数），如 ease, linear, ease-in-out

ease（默认）

steps(n)：分步动画 

 分n个步骤完成这个动画效果
linear  匀速
ease-in
ease-out
ease-in-out : 动画开始和结束时较慢，中间较快

animation-iteration-count

动画重复播放次数

（如 1, infinite 表示无限循环）

infinite为无限循环
animation-direction

动画执行方向

normal（默认，正常播放）
reverse（倒序播放）
alternate（正向播放完后反向播放）
alternate-reverse（反向播放完后正向播放）

animation-play-state暂停动画

paused为暂停，

通常配合:hover使用

动画animation各种使用情况案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}/* 给动画元素定义基础样式 */.box {background-color: #4CAF50; /* 绿色背景 */width: 200px; /* 初始宽度 */height: 100px; /* 固定高度 */margin: 50px auto; /* 居中显示 *//*transition: width 2s ease;  添加过渡效果（非必须） */}/* 定义动画的关键帧 */
@keyframes 扩展宽度 {from { /* 动画开始时的样式 */width: 200px;}to { /* 动画结束时的样式 */width: 800px;}}.animated-box:hover{animation: 扩展宽度 5s;/* linear：匀速 */animation: 扩展宽度 5s linear;/* steps：分步动画，工作中，配合精灵图实现精灵动画 *//*  我们这里是单纯的逐帧动画 这里没有精灵图片 */animation: 扩展宽度 5s steps(13); /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */animation: 扩展宽度 3s 5s;   animation: 扩展宽度 3s 3;   /* 重复次数，infinite：无限循环 */animation: 扩展宽度 3s infinite; /* alternate：反向 */animation: 扩展宽度 3s infinite alternate;/* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */animation: 扩展宽度 3s forwards;  animation: 扩展宽度 3s backwards;
}/* 动画二：从 200*100 变化到 300*300 变化到800*500 *//* 百分比：表示的意思是动画时长的百分比 */@keyframes 扩展宽度2 {0% {width: 200px;height: 100px;}20% {width: 300px;height: 300px;}100% {width: 800px;height: 500px;}}/* 定义关键帧动画 */@keyframes   扩展宽度3 {0% {transform: translateX(0) scale(1); /* 初始位置和大小 */background-color: lightblue;}50% {transform: translateX(200px) scale(1.2); /* 中间放大并右移 */background-color: lightgreen;}100% {transform: translateY(100PX) scale(1.5); /* 下移放大 */background-color: lightcoral;}} .animated-box2:hover{animation: 扩展宽度2 5s;
}/* 应用动画到元素上 */
.animated-box3:hover{animation-name: 扩展宽度3; /*使用的动画名称为  扩展宽度3    */  animation-duration: 5s; /* 动画持续时间5s */ animation-timing-function: ease-in-out; /* 动画速度曲线 */   /* 动画开始和结束时较慢，中间较快 */animation-delay: 3s;                   /* 延迟3秒后开始动画 */      animation-iteration-count: 3;          /* 动画重复播放3次 */animation-direction: alternate;        /* 动画在正向和反向之间交替 */    /* 第一次正向播放，第二次反向播放，第三次再正向播放 */  animation-fill-mode: forwards; /* 动画结束后保持最后一帧样式 */
}/* 使用animation
你可以将所有动画属性合并成一行： 
这样更简洁，但建议初学者先分开写，便于理解和调试。  */
.animated-box4:hover{animation: 扩展宽度3 5s ease-in-out 3s 3 alternate forwards;   
}</style>
</head>
<body><!-- 创建一个div元素用于应用动画 -->
<div class="box animated-box" ><!-- 这个div内部可以放置任何内容，这里为空 -->
</div><div class="box animated-box2" ><!-- 这个div内部可以放置任何内容，这里为空 -->
</div><div class="box animated-box3" ><!-- 这个div内部可以放置任何内容，这里为空 -->
</div><div class="box animated-box4" ><!-- 这个div内部可以放置任何内容，这里为空 -->
</div><div class="box animated-box5" ><!-- 这个div内部可以放置任何内容，这里为空 -->
</div></body>
</html>

 steps(n): 分步/逐帧/分帧 动画

steps(n) 是 CSS 中用于定义动画速度曲线的一个特定值，它允许你将动画分割成几个离散的步骤（即帧）来进行，而不是平滑过渡。

这意味着动画不是连续地进行，而是以跳跃的方式从一个状态直接切换到下一个状态，每个状态之间的转换是瞬间完成的。

应用场景

steps() 主要应用于逐帧动画，尤其是当你处理像精灵图这样的资源时非常有用。例如，如果你有一个包含多个动作姿势的图片序列（比如角色行走、跑步等），你可以利用 steps() 函数精确控制这些姿势如何以及何时显示，从而创建流畅的角色动画效果。

注意事项

  • 精灵图必须连续且等宽，否则动画会错位。
  • 使用 steps(n) 是关键，它让动画不会平滑过渡，而是“跳变”。
  • 如果你希望动画在开始时立刻跳到第一帧，可以写成 steps(4, start)。
  • 图片加载失败时可能看不到动画效果，请确保图片地址有效。

 steps(n)函数

steps(number_of_steps, direction)

  • number_of_steps: 整数值，表示动画应该分为多少个步骤或帧进行。
  • direction: 可选值，指定步进的方向。它可以取两个值：
    start: 第一步在动画开始时立即发生。
    end: 最后一步在动画结束时发生（默认值）。

steps(n)逐帧动画 +精灵图片的结合使用:模拟人物原地踏步

精灵动画制作步骤:

1.准备一个显示区域(元素盒子)

  • 元素盒子(显示区域)尺寸大小=一张精灵小图尺寸相同=140px

2.定义动画

  • 移动背景图(精灵图)（移动距离范围=精灵图宽度=1680px）

3.使用逐帧动画steps(n)： 

  • steps(N)，N与精灵小图个数相同

  animation: jingling_runing  3s steps(12) infinite;

    这个动画 在3s内分成12步让背景图(精灵图)沿X轴向左移动(1680px)动画  且无限重复  

    注意:这个动画只是让背景图(精灵图)沿X轴向左移动    元素div盒子是不动的

  background-position: 0 0;  

  x=0       背景图(精灵图)   在X轴原来默认位置0不动   此时 元素盒子 显示的 背景图(精灵图)的第一个小人    

 background-position: -1680px 0;   

 x=-1680px     背景图(精灵图)沿X轴向左移动1680px   此时 元素盒子 显示的 背景图(精灵图)的第12个小人   

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}/* 给动画元素定义基础样式 */div {/* 元素盒子尺寸大小=一张精灵小图尺寸相同 */width: 140px;   height: 140px;border: 1px solid #000;    background-image: url(./images/bg2.png);}@keyframes jingling_runing {     from {background-position: 0 0;     /* x=0       背景图(精灵图)   在X轴原来默认位置0不动   此时 元素盒子 显示的 背景图(精灵图)的第一个小人   */}to {background-position: -1680px 0;   /* x=-1680px     背景图(精灵图)沿X轴向左移动1680px   此时 元素盒子 显示的 背景图(精灵图)的第12个小人  */}}div:hover{/*  这个动画 在3s内分成12步让背景图(精灵图)沿X轴向左移动(1680px)动画  且无限重复  注意:这个动画只是让背景图(精灵图)沿X轴向左移动    元素div盒子是不动的      */animation: jingling_runing  3s steps(12) infinite;} </style>
</head>
<body><div></div>
</body>
</html>

 

多组动画组合 

animation:
动画1，
动画2，
动画N
 animation: 
jingling_runing 3s steps(12) infinite,div_move 12s 4s forwards linear ;

多组动画组合+ steps(n)逐帧动画 +精灵图片的结合使用:

模拟人物真实步行前行

多组动画组合

❶ 

    第一个动画:jingling_runing 3s steps(12) infinite : 

   只是让背景图(精灵图)沿X轴向左移动-1680px    元素div盒子是不动的

  ( steps(n)逐帧动画 +精灵图片的结合使用,只是模拟人物原地踏步) 

❷    第二个动画 :  div_move 12s 4s forwards linear:     

 让元素div盒子沿X轴向右移动1680px

 (让人物离开原地,真实步行前行)

   

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}/* 给动画元素定义基础样式 */div {/* 元素盒子尺寸大小与一张精灵小图尺寸相同 */width: 140px;height: 140px;border: 1px solid #000;    background-image: url(./images/bg2.png);}@keyframes jingling_runing {from {background-position: 0 0;     }to {background-position: -1680px 0;    }}@keyframes div_move {0% {transform: translate(0);}   100% {transform: translate(1680px);}}/* 多组动画组合 第一个动画:jingling_runing 3s steps(12) infinite   只是让背景图(精灵图)沿X轴向左移动-1680px    元素div盒子是不动的第二个动画 :  div_move 12s 4s forwards linear      让元素div盒子沿X轴向右移动1680px */div:hover{animation: jingling_runing 3s steps(12) infinite,div_move 12s 4s forwards linear ;}</style>
</head>
<body><div></div>
</body>
</html>

移动端网页适配

同一个网页项目 在不同的型号手机上打开   项目界面显示的分辨率不同 需要对项目网页界面分辨率进行适配在不同手机上显示都正常不会变形

如何打开谷歌浏览器上的手机模拟器

谷歌浏览器界面右击:检查->选中 图标 ->选择尺寸:三角->选择不同型号的手机

屏幕分辨率

屏幕分辨率： 一块屏幕上的水平垂直上的像素点个数，单位是px

  水平上有多少个像素点数  就表示宽的分辨率

 垂直上有多少个像素点数  就表示高的分辨率

PC(电脑)分辨率

我的电脑  物理分辨率(硬件分辨率)（出厂设置）: 1920*1080
             默认缩放100%
            系统的逻辑分辨率（软件/驱动设置） :1920*1080 

            系统的所有 UI 元素默认显示大小不变

 

什么是“物理分辨率”？

显示区域

物理分辨率指的是你的显示器实际拥有的像素数量。
比如你电脑屏幕是 1920×1080，表示它横向有 1920 个像素点，纵向有 1080 个像素点。

这是显示器硬件决定的，不可更改。

什么是“逻辑分辨率”？

系统的绘制界面UI元素区域

逻辑分辨率是操作系统或浏览器在渲染内容时使用的“虚拟”分辨率。
它会根据缩放比例发生变化。

在缩放为 100% 的情况下，操作系统不会对内容进行放大或缩小，而是直接按照原始尺寸渲染。

“缩放 100%”是什么意思？

所有 UI 元素（文字、图标、按钮等）都显示为它们设计时的原始大小；
没有放大也没有缩小；
每个像素对应一个真实的屏幕像素。

系统没有做任何额外的图像处理，原样显示。

所以：

默认缩放 100%下 ,逻辑分辨率 = 物理分辨率 = 1920×1080,所有 UI 元素默认显示大小不变

   缩放的本质

 简单理解:
    缩放的本质是：操作系统以较低的逻辑分辨率绘制界面UI元素，然后将界面UI元素  放大适当比例    已达到铺满物理分辨率的效果，从而让内容看起来更大、更清晰。
   

详细理解: 
  ❶  系统设置缩放为 100% 时:
   我的电脑操作系统的逻辑分辨率就是 1920×1080
   系统就使用这个逻辑分辨率1920×1080  进行绘制界面UI元素
   而这个  逻辑分辨率1920×1080 刚好等于  物理分辨率1920×1080
   所以绘制界面UI元素显示默认大小不变 不需要放大缩小 刚好铺满 屏幕的物理分辨率1920×1080
   
   ❷系统设置缩放为 150% 时:
   我的电脑操作系统的逻辑分辨率就变成 1280×720 ( 1920/150%=1280 1080/150%=720)
   系统就使用这个逻辑分辨率1280×720  进行绘制界面UI元素    
   很明显这个逻辑分辨率1280×720小于 物理分辨率1920×1080
   为了将绘制界面UI元素铺满 整个屏幕的物理分辨率1920×1080 
   所以不得不将UI元素放大1.5倍 已达到铺满屏幕的物理分辨率1920×1080的效果
     如果系统就使用这个逻辑分辨率1280×720 下进行绘制界面UI元素  不放大UI元素 也不铺满, 就会出现四周空白区域。
   

 我的电脑 默认缩放 100%  与放大150%对比前后变化
项目   

缩放 100%

（默认无放大/缩小）

缩放 150%

物理分辨率

(显示区域)

1920×1080   1920×1080（不变）

逻辑分辨率

(系统的绘制界面UI元素区域)

1920×1080

1280×720（系统认为的绘图空间）

1920/150%=1280

1080/150%=720

UI 元素大小 

正常

所有 UI 元素按原始尺寸显示

所有 UI 元素放大1.5倍
1个逻辑像素 1×1 = 1 个物理像素1个逻辑像素 1.5×1.5 = 2.25 个物理像素 
视觉感受 所有 UI 元素默认显示大小不变

  UI 元素显示变大

填满 屏幕(物理分辨率1920×1080 ) 

   
   
 

      ~
    

假设你有一个图标，设计成 64×64 像素大小：
缩放比例

物理分辨率

(显示区域)

逻辑分辨率

(绘制界面UI元素区域)

  UI元素图标

显示大小

（像素）

用户感受
100%1920×10801920×1080 UI元素大小不变 64×64    正常大小
150%1280×7201920×1080 

  UI元素放大1.5倍实际占用 96×96

(64*1.5=96
   64*1.5=96)

字体变大了，更容易看清楚 ，刚好铺满

物理分辨率

(显示区域)

UI元素不放大就是用 64×64大小

UI元素没有铺满

物理分辨率

(显示区域) 四周就会留白

    
 
     
 

 

DPR（设备像素比）
DPR = 物理像素 / 逻辑像素

缩放 100%：DPR = 1

  •    每个 CSS 的像素（即逻辑像素） 占用了 1×1 = 1 个物理像素

   
   
缩放 150%：DPR = 1.5

  •   每个 CSS 的像素（即逻辑像素） 占用了 1.5×1.5 = 2.25 个物理像素 

 

手机的分辨率

移动端项目的网页适配方案:

 

rem 适配方案:less

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

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

相关文章

Java 程序设计试题​

Java 程序设计试题​

​考试时间&#xff1a;120 分钟​ ​总分&#xff1a;100 分​ 一、选择题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09; 1.以下哪个不是 Java 的关键字&#xff1f; A. final B. sizeof C. static D. void 2.以下代码输出结果是&#xff1f; System.out.printl…
阅读更多...
Elasticsearch（ES）与 OpenSearch（OS）

Elasticsearch（ES）与 OpenSearch（OS）

Elasticsearch&#xff08;ES&#xff09;与 OpenSearch&#xff08;OS&#xff09;本质上是同源分叉、独立演进的技术&#xff0c;两者关系可概括为“起源相同、目标分化”。以下是关键要点解析&#xff1a; &#x1f50d; 一、核心关系&#xff1a;分叉与独立演进 起源相同 O…
阅读更多...
Python爬虫实战：研究Ghost.py相关技术

Python爬虫实战：研究Ghost.py相关技术

1 引言 1.1 研究背景与意义 随着互联网技术的不断发展，现代网页越来越多地采用 JavaScript 动态生成内容，传统的静态爬虫技术已难以满足需求。例如，许多新闻网站的评论区、电商平台的商品列表以及社交网站的动态内容均通过 AJAX 异步加载，普通爬虫无法获取这些内容。Ghos…
阅读更多...
PostgreSQL（知识片）：查询/计算Selectivity（可选性）

PostgreSQL（知识片）：查询/计算Selectivity（可选性）

一、视图pg_ststs查询可选性 1、当可选性较小时&#xff0c;可以用视图pg_ststs来查询 表的每一列的MVC&#xff08;most Common Value&#xff09;作为一对most_common_vals和most_common_freqs的列存储在pg_ststs视图中。 &#xff08;1&#xff09;most_common_vals&#x…
阅读更多...
Android Studio 打 APK 包报错 Invalid keystore format 的解决方法

Android Studio 打 APK 包报错 Invalid keystore format 的解决方法

提示&#xff1a;“奔跑吧邓邓子” 的必备核心技能专栏聚焦计算机技术与职场场景&#xff0c;拆解程序员、产品经理等技术从业者的核心能力图谱。内容涵盖编程思维、算法实战、项目管理、技术架构等硬核技能&#xff0c;结合案例解析代码优化、跨团队协作等落地方法论。定期更新…
阅读更多...
通义灵码2.5智能体模式实战———集成高德MCP 10分钟生成周边服务地图应用

通义灵码2.5智能体模式实战———集成高德MCP 10分钟生成周边服务地图应用

1 引言 在当今快节奏的开发环境中&#xff0c;智能编程助手正成为开发者生产力的倍增器。通义灵码2.5的智能体模式通过任务分解、多轮对话和上下文感知&#xff0c;将传统代码补全提升为完整的解决方案生成能力。本文将以实战案例展示如何利用通义灵码2.5集成高德地图MCP服务&…
阅读更多...
【Linux】使用ip link命令设置bond

【Linux】使用ip link命令设置bond

目录 1、介绍2、设置步骤【1】创建bonding接口【2】设置bonding模式【3】添加物理网口到bonding接口【4】激活bonding接口 3、解除步骤【1】关闭bond接口【2】接触从属接口【3】删除bond接口 1、介绍 设置bond的方法有很多种&#xff0c;其中通过命令行ip link设置就是其中一种…
阅读更多...
Camunda相关表结构和字段备注SQL脚本

Camunda相关表结构和字段备注SQL脚本

Camunda相关表结构和字段备注SQL脚本 引camunda engine表和字段备注 引 Camunda engine服务启动时会自动创建相关的表&#xff0c;沿用了activity的设计&#xff0c;我这里使用的是7.17.0版&#xff0c;自动生成了49张表&#xff0c;但所有的表和字段都没有备注信息&#xff0c…
阅读更多...
Qt、C++自定义按钮、组件、事件编程开发练习，万字实战解析！！

Qt、C++自定义按钮、组件、事件编程开发练习，万字实战解析！！

x项目地址&#xff1a;https://gitee.com/fan-wenshan/qt_learn_button-andevent_zhengzhuo 项目界面截图&#xff1a; ### 项目介绍&#xff1a;comstomSingal (Qt应用程序) 项目基本信息 - 项目类型 &#xff1a;Qt Widgets应用程序 - 开发环境 &#xff1a;Qt 5.12.12 Min…
阅读更多...
商务年度总结汇报PPT模版分享

商务年度总结汇报PPT模版分享

商务汇报&#xff0c;工作总结&#xff0c;毕业答辩&#xff0c;简历竞聘PPT模版&#xff0c;创意年终汇报PPT模版&#xff0c;IDEAS商务汇报PPT模版&#xff0c;年度总结PPT模版&#xff0c;创意低多边形PPT模版&#xff0c;商务型PPT模版&#xff0c;小清新创意花朵PPT模版&a…
阅读更多...
电机设计仿真软件学习DAY3——Maxwell界面功能+3D几何模型绘制

电机设计仿真软件学习DAY3——Maxwell界面功能+3D几何模型绘制

"手把手教你玩转电机&#xff01;每日更新教程&#xff0c;评论区答疑解惑&#xff0c;小白也能变大神&#xff01;" 目录 maxwell基础操作 一.Maxwell基础操作&#xff1a;新建项目 二.maxwell3D界面 三.maxwell3D绘图 3.1绘制圆柱体的方法 3.2绘制正方体的方法…
阅读更多...
Apache 支持 HTTPS

Apache 支持 HTTPS

证书文件 提取私钥 openssl pkcs12 -in cert.pfx -nocerts -out private.key -nodes 打开命令行&#xff08;CMD 或 PowerShell&#xff09;&#xff0c;进入证书所在目录&#xff0c;输入上面命令&#xff0c;它会提示你输入密码&#xff0c;可以从 password.txt 中复制 提取证…
阅读更多...
自然语言处理中的Transformer模型：超越RNN和LSTM

自然语言处理中的Transformer模型：超越RNN和LSTM

在人工智能的众多领域中，**自然语言处理（Natural Language Processing, NLP）**无疑是最具挑战性也最具前景的方向之一。从机器翻译、文本摘要到情感分析和智能问答，NLP 旨在让机器理解、解释和生成人类语言。长期以来，循环神经网络（Recurrent Neural Network, RNN）及其变…
阅读更多...
vue3 new Date() 时间操作

vue3 new Date() 时间操作

在Vue 3中&#xff0c;你可以使用JavaScript的Date对象来处理日期和时间。如果你想创建一个新的Date对象表示当前时间减去一天&#xff0c;你可以使用以下几种方法之一&#xff1a; 方法1&#xff1a;使用Date对象的setDate()方法 const now new Date(); now.setDate(now.ge…
阅读更多...
WebRTC（八）：SDP

WebRTC（八）：SDP

SDP 概念 SDP 是一种描述多媒体通信会话的文本格式&#xff08;基于 MIME&#xff0c;RFC 4566&#xff09;。本身 不传输数据&#xff0c;仅用于在会话建立阶段传递信息。常与 SIP&#xff08;VoIP&#xff09;、RTSP、WebRTC 等协议配合使用。 用途 描述媒体类型&#xf…
阅读更多...
算法竞赛＞力扣＞周赛 | weekly-contest-455

算法竞赛＞力扣＞周赛 | weekly-contest-455

原文链接&#xff1a;算法竞赛>力扣>周赛 | weekly-contest-455 3591.检查元素频次是否为质数 解题思路 统计每个元素出现的次数&#xff0c;判断各次数是否为质数。由于次数<100&#xff0c;可用试除法判断。 代码实现 bool isPrime(int x) {if (x < 2)retur…
阅读更多...
Vue 2快速实现px转vw适配

Vue 2快速实现px转vw适配

Vue 2 Vue CLI 项目 px 转 vw 完整使用指南 &#x1f4cb; 概述 本指南详细介绍如何在 Vue 2 Vue CLI 项目中使用 postcss-px-to-viewport-8-plugin 插件&#xff0c;实现自动将 px 单位转换为 vw 单位的响应式设计。 &#x1f680; 第一步&#xff1a;插件安装 1.1 安装…
阅读更多...
Android MVVM模式介绍

Android MVVM模式介绍

一、介绍 1.Model(模型) Model代表应用程序的数据和业务逻辑。它负责处理数据的获取、存储和更新&#xff0c;例如从数据库中检索数据或通过网络请求获取数据。Model通常是与UI无关的部分&#xff0c;因此可以独立测试和复用。 2. View&#xff08;视图&#xff09; View是用…
阅读更多...
WHAT - React Native 的 Expo Router

WHAT - React Native 的 Expo Router

文章目录 核心定义核心理念核心功能解析&#xff08;Features&#xff09;1. Native2. Shareable3. Offline-first4. Optimized5. Iteration6. Universal7. Discoverable 总结示例&#xff1a;页面结构如何变成导航&#xff1f; 原文&#xff1a;https://docs.expo.dev/router/…
阅读更多...
XML读取和设置例子

XML读取和设置例子

在Qt C中&#xff0c;可以使用Qt的 QDomDocument类来读取、更新和保存XML文件。这个类提供了对XML文档的强大操作能力&#xff0c;支持通过DOM&#xff08;文档对象模型&#xff09;对XML进行读取、修改、添加和删除节点等操作。 下面是一个详细的例子&#xff0c;演示如何在Qt…
阅读更多...
最新文章

Copyright @ 2022~2023