CSS学习笔记之高级教程(二)

news2024/11/22 16:56:08

10、CSS 3D 转换

通过 CSS transform 属性,您可以使用以下 3D 转换方法:

  • rotateX()
  • rotateY()
  • rotateZ()

10.1 rotateX() 方法(使元素绕其 X 轴旋转给定角度)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    /* div{
      position: absolute;
    } */
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: #F0AAAE;
      border: 1px solid black;
    }

    div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateX(50deg);
    }
  </style>
</head>

<body>

   <div>
    <div class="ex1"></div>
    <div class="ex2"></div>
   </div>
</body>

</html>

运行效果:
在这里插入图片描述

10.2 rotateY() 方法(使元素绕其 Y 轴旋转给定角度)

div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateY(50deg);
    }

10.3 rotateZ() 方法(方法使元素绕其 Z 轴旋转给定角度)

div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateZ(50deg);
    }

11、CSS 过渡

  • CSS 过渡允许您在给定的时间内平滑地改变属性值。

如需创建过渡效果,必须明确两件事:

  • 您要添加效果的 CSS 属性
  • 效果的持续时间

在这里插入图片描述

示例:

  • transition: width 2s,height 2s;
  • transition: width 2s;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    /* div{
      position: absolute;
    } */
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: #F0AAAE;
      border: 1px solid black;
      transition: width 2s;
    }

    div.ex1:hover{
      width: 400px;
    }

   
  </style>
</head>

<body>

   <div>
    <div class="ex1"></div>
   </div>
</body>

</html>

运行效果:
鼠标放置元素上后,元素宽度会从200px 平滑增加到 400px,动画效果持续2秒钟

11.2 transition-timing-function(规定过渡效果的速度曲线)

transition-timing-function 属性可接受以下值:

  • ease - 规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束(默认)
  • linear - 规定从开始到结束具有相同速度的过渡效果
  • ease-in -规定缓慢开始的过渡效果
  • ease-out - 规定缓慢结束的过渡效果
  • ease-in-out - 规定开始和结束较慢的过渡效果
  • cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

11.3 transition-delay (规定过渡效果的延迟(以秒计))。

div {
  transition-delay: 1s;
}

11.4 过渡 + 转换

div {
  transition: width 2s, height 2s, transform 2s;
}

11.5 简写的 transition 属性

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

可简写为:

div {
  transition: width 2s linear 1s;
}

12、CSS 动画

12.1 @keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效,必须将动画绑定到某个元素。

  • animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性,则动画不会发生,因为默认值是 0s(0秒)

12.2 from、to关键词使用:

下面的例子将 “example” 动画绑定到 <div> 元素。动画将持续 4 秒钟,同时将 <div> 元素的背景颜色从 “red” 逐渐改为 “yellow”:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
    }

    @keyframes example {
      from {
        background-color: red;
      }

      to {
        background-color: yellow;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.3 动画完成度(百分制):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
    }

    @keyframes example {

      0% {
        background-color: red;
      }

      25% {
        background-color: yellow;
      }

      50% {
        background-color: blue;
      }

      100% {
        background-color: green;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.3 延迟动画:animation-delay

  • 负值也是允许的。如果使用负值,则动画将开始播放,如同已播放 N 秒。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-delay: 1s;
    }

    @keyframes example {

      0% {
        background-color: red;
      }

      25% {
        background-color: yellow;
      }

      50% {
        background-color: blue;
      }

      100% {
        background-color: green;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.4 设置动画应运行多少次:animation-iteration-count

  • 使用值 “infinite” 使动画永远持续下去
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-delay: 1s;
      /* 动画运行次数 */
      animation-iteration-count:3
    }

    @keyframes example {

      0% {
        background-color: red;
      }

      25% {
        background-color: yellow;
      }

      50% {
        background-color: blue;
      }

      100% {
        background-color: green;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.5 反向或交替运行动画:animation-direction

animation-direction 属性可接受以下值:

  • normal - 动画正常播放(向前)。默认值
  • reverse - 动画以反方向播放(向后)
  • alternate - 动画先向前播放,然后向后
  • alternate-reverse - 动画先向后播放,然后向前
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
      animation-name: example;
      animation-duration: 4s;
      animation-timing-function:ease;
      animation-iteration-count: 2;
      /* 动画以反方向播放(向后) */
      animation-duration: reverse;
    }

    @keyframes example {

      0% {
        background-color: red;
        left: 0;
        top: 0;
      }

      25% {
        background-color: yellow;
        left: 200px;
        top: 0;
      }

      50% {
        background-color: blue;
        left: 200px;
        top: 200px;
      }

      100% {
        background-color: green;
        left: 0px;
        top: 200px;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.6 指定动画的速度曲线:animation-timing-function

animation-timing-function 属性可接受以下值:

  • ease - 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
  • linear - 规定从开始到结束的速度相同的动画
  • ease-in - 规定慢速开始的动画
  • ease-out - 规定慢速结束的动画
  • ease-in-out - 指定开始和结束较慢的动画
  • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

12.7 指定动画的填充模式:animation-fill-mode

  • 在不播放动画时(在开始之前,结束之后,或两者都结束时),animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值:

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
  • forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-directionanimation-iteration-count)。
  • backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
  • both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。

12.8 动画简写属性

  div {
        /* 动画名称 */
        animation-name: example;
        /* 动画执行时间 */
        animation-duration: 5s;
        /* 指定动画的速度曲线-规定从开始到结束的速度相同的动画 */
        animation-timing-function: linear;
        /* 延迟多久后执行动画 */
        animation-delay: 2s;
        /* 执行动画次数:循环 */
        animation-iteration-count: infinite;
        /* 反向或交替运行动画:动画先向前播放,然后向后 */
        animation-direction: alternate;
      }

简写为:

div {
  animation: example 5s linear 2s infinite alternate;
}

在这里插入图片描述

13、CSS 工具提示

  • 通过 CSS 创建工具提示(Tooltip)。

13.1 基础的工具提示

创建一个鼠标移到元素上时显示的工具提示:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }

    .tooltiptext {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
  </style>
</head>

<body>

  <div class="tooltip">鼠标移到我上面
    <span class="tooltiptext">提示文字</span>
  </div>

</body>

</html>

13.2 定位工具提示

  • 右侧工具提示:
.tooltip .tooltiptext {
  top: -5px;
  left: 105%; 
}
  • 左侧工具提示:
.tooltip .tooltiptext {
  top: -5px;
  right: 105%; 
}
  • 顶部工具提示:
.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
  • 底部工具提示:
.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

示例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      background-color: rgb(107, 119, 189);
      padding: 15px 25px;
      color: white;
      border-radius: 5px;
      margin-left: 200px;
      margin-top: 100px;
    }

    .tooltiptext-top {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      bottom: 105%;
      left: -30px;
    }

    .tooltip:hover .tooltiptext-top {
      visibility: visible;
    }

    .tooltiptext-left {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      right: 105%;
      top: 50%;
      transform: translateY(-50%);
    }

    .tooltip:hover .tooltiptext-left {
      visibility: visible;
    }

    .tooltiptext-right {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      left: 105%;
      top: 50%;
      transform: translateY(-50%);
    }

    .tooltip:hover .tooltiptext-right {
      visibility: visible;
    }

    .tooltiptext-bottom {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      top: 105%;
      left: 50%;
      transform: translateX(-50%);
    }

    .tooltip:hover .tooltiptext-bottom {
      visibility: visible;
    }
  </style>
</head>

<body>

  <div>
    <div class="tooltip">Top
      <div class="tooltiptext-top">顶部提示</div>

    </div>
    <div class="tooltip">Left
      <div class="tooltiptext-left">左部提示</div>
    </div>
    <div class="tooltip">Right
      <div class="tooltiptext-right">右部提示</div>
    </div>
    <div class="tooltip">Bottom
      <div class="tooltiptext-bottom">底部提示</div>
    </div>
  </div>


</body>

</html>

13.4 工具提示箭头

  • 思路:使用伪元素:::after 伪元素(伪元素可用于在元素内容之后插入一些内容)
  • 顶部提示增加箭头示例( 关键点:border-color: black transparent transparent transparent;):
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      background-color: rgb(107, 119, 189);
      padding: 15px 25px;
      color: white;
      border-radius: 5px;
      margin-left: 200px;
      margin-top: 100px;
    }

    .tooltiptext-top {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      bottom: 105%;
      left: -30px;
    }

    .tooltip:hover .tooltiptext-top {
      visibility: visible;
    }

    /* 使用伪元素添加箭头内容 */
    .tooltiptext-top::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      border-width: 5px;
      border-style: solid;
      border-color: black;
      margin-left: -5px;
      border-color: black transparent transparent transparent;
    }
  </style>
</head>

<body>

  <div>
    <div class="tooltip">Top
      <div class="tooltiptext-top">顶部提示</div>
    </div>
  </div>


</body>

</html>
  • 左部提示增加箭头示例( 关键点:border-color: transparent black transparent transparent;
  • 右部提示增加箭头示例( 关键点: border-color: transparent transparent transparent black;
  • 底部提示增加箭头示例( 关键点: border-color: transparent transparent black transparent ;

13.5 淡入的工具提示(动画)

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

示例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      background-color: rgb(107, 119, 189);
      padding: 15px 25px;
      color: white;
      border-radius: 5px;
      margin-left: 200px;
      margin-top: 100px;
    }

    .tooltiptext-top {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      bottom: 105%;
      left: -30px;
      /* 增加淡入动画 */
      opacity: 0;
      transition: opacity 1s;
    }

    .tooltip:hover .tooltiptext-top {
      visibility: visible;
      opacity: 1;
    }

    /* 使用伪元素添加箭头内容 */
    .tooltiptext-top::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      border-width: 5px;
      border-style: solid;
      border-color: black;
      margin-left: -5px;
      border-color: black transparent transparent transparent;
    }
  </style>
</head>

<body>

  <div>
    <div class="tooltip">Top
      <div class="tooltiptext-top">顶部提示</div>
    </div>
  </div>


</body>

</html>

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

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

相关文章

NLP(17)--大模型发展(1)

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 大模型的演化&#xff1a; ElMO : 类似双向lstm 结果和词向量拼接 预训练鼻祖 GPT :使用了Transformer 模型 开始使用Token &#xff08;发现预训练的作用&#xff09; Bert&#xff1a;认为双向比单向好 MLM(双向) 优于 LT…

ARP基本原理

相关概念 ARP报文 ARP报文分为ARP请求报文和ARP应答报文&#xff0c;报文格式如图1所示。 图1 ARP报文格式 Ethernet Address of destination&#xff08;0–31&#xff09;和Ethernet Address of destination&#xff08;32–47&#xff09;分别表示Ethernet Address of dest…

Linux中解决普通用户使用不了sudo问题

目录 sudo的使用场景sudo使用不了的原因解决方法 sudo的使用场景 之前我们介绍了文件的权限问题 如果一个普通用户想去执行一个它命令之外的权限&#xff0c;只能使用sudo 比如普通用户使用yum去安装软件&#xff0c;需要sudo yum xxxx sudo使用不了的原因 这里我们用普通用户…

浏览器的下载行为基本原理

浏览器解析 在使用浏览器访问某些资源时&#xff0c;有些资源是直接下载有些资源是直接打开。例如前端的html&#xff0c;xml&#xff0c;css&#xff0c;图片等资源都是直接打开&#xff0c;而txt&#xff0c;excel等文件是直接下载。那么如何控制访问一个资源时是下载文件还…

C# run Node.js

C# run nodejs Inter-Process Communication&#xff0c;IPC Process类 启动Node.js进程&#xff0c;通过标准输入输出与其进行通信。 // n.js// 监听来自标准输入的消息 process.stdin.on(data, function (data) {// 收到消息后&#xff0c;在控制台输出并回复消息console.l…

MyBatisPlus标准分页功能制作,以及设置分页拦截器,selectPage(new Page<>(current,size),null)

目录 1、设置分页拦截器 2、创建数据库及表 3、pom.xml 4、添加MP的相关配置信息 application.yml 5、根据数据库表创建实体类 User 6、创建 UserDao 接口 7、编写引导类 8、编写测试类 9、Run的运行结果 1、设置分页拦截器 package com.example.config; import com.baomidou.m…

从零开始傅里叶变换

从零开始傅里叶变换 1 Overview2 傅里叶级数2.1 基向量2.2 三角函数系表示 f ( t ) f(t) f(t)2.2.1 三角函数系的正交性2.2.2 三角函数系的系数 2.3 复指数函数系表示 f ( t ) f(t) f(t)2.3.1 复指数函数系的系数2.3.2 复指数函数系的正交性 2.4 傅里叶级数总结 3 傅里叶变换…

基于轻量级神经网络GhostNet开发构建CIFAR100数据集场景下的图像识别分析系统,对比不同分辨路尺度下模型的性能情况

Cifar100数据集是一个经典的图像分类数据集&#xff0c;常用于计算机视觉领域的研究和算法测试。以下是关于Cifar100数据集的详细介绍&#xff1a; 数据集构成&#xff1a;Cifar100数据集包含60000张训练图像和10000张测试图像。其中&#xff0c;训练图像分为100个类别&#x…

肯尼亚大坝决堤反思:强化大坝安全监测的必要性

一、背景介绍 近日&#xff0c;肯尼亚发生了一起严重的大坝决堤事件。当地时间4月29日&#xff0c;肯尼亚内罗毕以北的一座大坝决堤&#xff0c;冲毁房屋和车辆。当地官员称&#xff0c;事故遇难人数已升至71人。这起事件再次提醒我们&#xff0c;大坝安全无小事&#xff0c;监…

SpringMVC源码解读[1] -Spring MVC 环境搭建

源码地址: https://github.com/chen-jiacheng/springmvc-quickstart 一、使用 IDEA 创建 Spring MVC 项目 直接创建项目即可 默认项目结构: springmvc-quickstart ├── pom.xml └── src├── main│ ├── java│ │ └── com│ │ └── chenjiache…

微软开发者大会:编程进入自然语言时代、“AI员工”闪亮登场

当地时间周二&#xff0c;美国科技公司微软召开年度Build开发者大会。在CEO纳德拉的带领下&#xff0c;微软各个产品团队再一次展现出惊人的执行力&#xff0c;在发布会上又拿出了接近50个新产品或功能更新。 整场发布会持续了接近两个小时&#xff0c;在这里挑选了一些投资者…

深度学习之基于YoloV5入侵检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。入侵检测系统&#xff08;IDS&#xff0…

[图解]产品经理创新模式01物流变成信息流

1 00:00:01,570 --> 00:00:04,120 有了现状的业务序列图 2 00:00:04,960 --> 00:00:08,490 我们就来改进我们的业务序列图了 3 00:00:08,580 --> 00:00:11,010 把我们要做的系统放进去&#xff0c;改进它 4 00:00:13,470 --> 00:00:15,260 怎么改进&#xff1f;…

第五节 Starter 的加载全貌

tips&#xff1a;下载源码&#xff0c;再结合本章内容&#xff0c;学习整个加载过程。 上一章&#xff0c;我们理解了 spring.factories 的触发时机&#xff0c;但放在 SpringBoot 的整个加载过程来讲&#xff0c;只能算部分。 而这一章&#xff0c;将从 SpringBoot 的加载全貌…

Day 60 84.柱状图中最大的矩形

柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 1 < heights.length <10^50 < heights[i] < 10^4 ​ 这道题很明显&…

x264码率控制基础

x264码率控制模型 x264码率控制也是基于率失真模型即,D为失真,R为码率,为拉格朗日因子,当取值较大时,倾向于低码率高失真的情况;当取值较小时,倾向于高码率低失真的情况。由拉格朗日乘数法知, 参考[1], x264采用的是高码率下码率和失真之间的关系

数据结构和算法|排序算法系列(一)|选择排序

首先需要你对排序算法的评价维度和一个理想排序算法应该是什么样的有一个基本的认知&#xff1a; 《Hello算法之排序算法》 主要内容来自&#xff1a;Hello算法11.2 选择排序 选择排序是明显的基于比较的排序。下文开始阐述选择排序的整个算法流程 算法流程 选择排序应该已…

x264 码率控制原理:x264_ratecontrol_start 函数

x264_ratecontrol_start 函数 函数原理 函数功能:编码一帧之前,为当前帧选择一个量化 QP,属于帧级别码率控制;这对于控制视频质量和文件大小至关重要。通过调整QP,编码器可以在保持视频质量的同时,尽可能减小输出文件的大小。函数参数:x264_t *h: 编码器上下文结构体指…

贴片 RS8752XK 封装SOP-8 250MHz,2通道高速运放

传感器信号放大&#xff1a;在传感器应用中&#xff0c;RS8752XK可以用于放大微弱的传感信号&#xff0c;如压力、温度、光强等传感器的信号。 数据采集系统&#xff1a;在数据采集设备中&#xff0c;RS8752XK可以用于放大和调理模拟信号&#xff0c;以供模数转换器&#xff0…