CSS3 动画 animation 入门学习笔记 之 属性详解

news2024/12/23 17:02:56

文章目录

  • 简单介绍 CSS 动画
  • CSS 动画的作用
  • CSS 动画语法介绍
  • CSS 动画属性
    • animation-name
    • animation-duration
    • animation-delay
    • animation-direction
    • animation-iteration-count
    • animation-play-state
    • animation-timing-function
    • animation-fill-mode
    • animation

简单介绍 CSS 动画

引用 MDN 对 CSS 动画的说明：

  • CSS 动画模块（CSS Animation）可以让你通过使用关键帧对 CSS 属性的值进行动画处理，例如背景位置和变换。
  • 每个关键帧都描述了动画元素在动画序列中的某个特定时间应该如何呈现。
  • 你可以使用动画模块中的属性来控制动画的持续时间、重复次数、延迟启动等方面。

简单讲，CSS 动画是用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置的呈现效果。

CSS 动画的作用

CSS 动画使得您能够实现一些难以置信的效果点缀您的页面或者应用程序。（MDN）

CSS 动画语法介绍

动画语法包括两个部分：

  • 描述动画的样式规则。
  • 指定动画开始、结束以及中间点样式的关键帧。

示例代码：

/* 指定动画的样式规则 */
.div {
  width: 200px;
  height: 200px;
  animation: change 3s;
}

/* 指定动画开始、结束点样式的关键帧。 */
@keyframes change {
  0% {
    background-color: #f00;
  }

  100% {
    background-color: #fff;
  }
}

结合上例，对一个元素创建动画，需要在元素的 CSS 选择器上使用animation属性或其子属性来配置动画时长、动画呈现方式及其他动画运行时相关参数，而动画在不同时间点的关键帧的表现样式则需要通过@keyframes来配置。

CSS 动画属性

animation-name

指定由 @keyframes 定义动画名称标识，多个使用逗号隔开。

animation-duration

设置动画一个周期的时长，值必须为正数或 0，单位：秒（s）或毫秒（ms）。
示例：说明：本文示例代码由 vue3 + element-plus 构建

<template>
  <el-card header="animation-duration">
    <div class="ani-box slow" :class="{ running: playState }">
      <div>10s</div>
    </div>
    <div class="ani-box fast" :class="{ running: playState }">
      <div>3s</div>
    </div>
    <el-button type="primary" @click="handleAnimationRunning"
      >播放动画</el-button
    >
  </el-card>
</template>

<style scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 40px;
    animation-name: move;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    text-align: center;
    line-height: 80px;
    color: wheat;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .ani-box.slow {
    animation-duration: 10s;
  }

  .ani-box.fast {
    animation-duration: 3s;
  }

  .ani-box.running {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(500px);
    }
  }
</style>

<script setup>
  import { ref } from "vue";
  const playState = ref(false);
  const handleAnimationRunning = () => {
    playState.value = true;
  };
</script>

运行结果：
animation-duration

animation-delay

设置延时，指定从应用动画到元素开始执行之前等待的时间，值可以是负值，单位：秒（s）或毫秒（ms）。

  • 默认值为 0s，表示动画应立即开始。
  • 正值表示动画应在指定的时间量过去后开始。
  • 负值会导致动画立即开始，但是从动画循环的某个时间点开始。

示例代码：

<template>
  <el-card header="animation-delay">
    <div class="ani-box default" :class="{ running: playState }">
      <div>0s</div>
    </div>
    <div class="ani-box positive" :class="{ running: playState }">
      <div>5s</div>
    </div>
    <div class="ani-box negative" :class="{ running: playState }">
      <div>-5s</div>
    </div>
    <el-button type="primary" @click="handleAnimationRunning"
      >播放动画</el-button
    >
  </el-card>
</template>
<style scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 40px;
    text-align: center;
    line-height: 80px;
    color: wheat;
    font-size: 20px;
    margin-bottom: 20px;
    animation-name: move;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    animation-duration: 10s;
    animation-timing-function: linear;
  }

  .ani-box.default {
    animation-delay: 0s;
  }

  .ani-box.positive {
    animation-delay: 5s;
  }

  .ani-box.negative {
    animation-delay: -5s;
  }

  .ani-box.running {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(500px);
    }
  }
</style>
<script setup>
  import { ref } from "vue";
  const playState = ref(false);
  const handleAnimationRunning = () => {
    playState.value = true;
  };
</script>

运行结果：
animation-delay

animation-direction

设置动画是正向播放、反向播放、还是在正向和反向之间交替播放。可选值：

  • normal：动画在每个循环中正向播放。即每次动画循环时，动画将重置为起始状态并重新开始。默认值。
  • reverse：动画在每个循环中反向播放。即每次动画循环时，动画将重置为结束状态并重新开始。
  • alternate：动画在每个循环中正反交替播放，第一次是正向播放。
  • alternate-rever：动画在每个循环中正反交替播放，第一次是反向播放。

示例代码：

<template>
  <el-card header="animation-direction">
    <div class="ani-box normal" :class="{ running: playState }">
      <div>normal</div>
    </div>
    <div class="ani-box reverse" :class="{ running: playState }">
      <div>reverse</div>
    </div>
    <div class="ani-box alternate" :class="{ running: playState }">
      <div>alternate</div>
    </div>
    <div class="ani-box alternate-reverse" :class="{ running: playState }">
      <div>alternate-reverse</div>
    </div>
    <el-button type="primary" @click="handleAnimationRunning"
      >播放动画</el-button
    >
  </el-card>
</template>
<style scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 40px;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: wheat;
    font-size: 16px;
    margin-bottom: 20px;
    animation-name: move;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 4;
  }

  .ani-box.normal {
    animation-direction: normal;
  }

  .ani-box.reverse {
    animation-direction: reverse;
  }

  .ani-box.alternate {
    animation-direction: alternate;
  }

  .ani-box.alternate-reverse {
    animation-direction: alternate-reverse;
  }

  .ani-box.running {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(500px);
    }
  }
</style>
<script setup>
  import { ref } from "vue";
  const playState = ref(false);
  const handleAnimationRunning = () => {
    playState.value = true;
  };
</script>

运行结果：
animation-direction

animation-iteration-count

设置动画在停止前应播放的次数。可选值：

  • infinite：无限循环播放动画。
  • 数值：动画重复次数，默认 1，可以是小数，如 0.5 将动画播放一半，负值无效。

示例代码：

<template>
  <el-card header="animation-iteration-count">
    <div class="ani-box half" :class="{ running: playState }">
      <div>0.5次</div>
    </div>
    <div class="ani-box once" :class="{ running: playState }">
      <div>1次</div>
    </div>
    <div class="ani-box twice" :class="{ running: playState }">
      <div>2次</div>
    </div>
    <el-button type="primary" @click="handleAnimationRunning"
      >播放动画</el-button
    >
  </el-card>
</template>
<style scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 40px;
    text-align: center;
    line-height: 80px;
    color: wheat;
    font-size: 20px;
    margin-bottom: 20px;
    animation-name: move;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    animation-duration: 6s;
    animation-timing-function: linear;
  }

  .ani-box.half {
    animation-iteration-count: 0.5;
  }

  .ani-box.once {
    animation-iteration-count: 1;
  }

  .ani-box.twice {
    animation-iteration-count: 2;
  }

  .ani-box.running {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(500px);
    }
  }
</style>
<script setup>
  import { ref } from "vue";
  const playState = ref(false);
  const handleAnimationRunning = () => {
    playState.value = true;
  };
</script>

运行结果：
animation-iteration-count

animation-play-state

设置动画运行状态，运行或暂停。可选值：

  • running：设置动画为运行状态。
  • paused：设置动画为暂停状态。

示例代码：

<template>
  <el-card header="animation-play-state">
    <div class="ani-box running">51BLOG</div>

    <el-alert
      title="鼠标悬浮时运行动画，离开时暂停动画。"
      :closable="false"
      show-icon
      type="warning"
    ></el-alert>
  </el-card>
</template>
<style lang="scss" scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 4px;
    text-align: center;
    line-height: 80px;
    color: wheat;
    font-size: 16px;
    text-shadow: 1px 2px 1px red;
    margin-bottom: 30px;
    cursor: pointer;
    animation-name: move;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    animation-duration: 5s;
    animation-timing-function: linear;
  }

  .ani-box:hover {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>

运行结果：
animation-play-state

animation-timing-function

设置动画在每个周期的持续时间内如何进行。支持三种类型值：

  • 关键字值
    • ease 默认值，表示动画在中间加速，在结束时减速。等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • ease-in 表示动画一开始较慢，随着动画属性的变化逐渐加快，直至完成。等同于 cubic-bezier(0.42, 0, 1.0, 1.0)
    • ease-out 表示动画一开始较快，随着动画的进行逐渐减速。等同于 cubic_bezier(0, 0, 0.58, 1.0)
    • ease-in-out 表示动画一开始缓慢变化，随后加速变化，最后再次减速变化。等同于 cubic_bezier(0.42, 0, 0.58, 1.0)
    • linear 表示动画以匀速运动。等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • step-start 等同于 steps(1, jump-start)
    • step-end 等同于 steps(1, jump-end)

      ease、ease-in、ease-out、ease-in-out、linear 称之为非阶跃（non-step）关键字值，代表了固定的四点值的三次贝塞尔曲线

示例代码：

<template>
  <el-card header="animation-timing-function: ease">
    <div class="ani-box ease" :class="{ running: playState }">
      <div>ease</div>
    </div>
    <div class="ani-box ease-in" :class="{ running: playState }">
      <div>ease-in</div>
    </div>
    <div class="ani-box ease-out" :class="{ running: playState }">
      <div>ease-out</div>
    </div>
    <div class="ani-box ease-in-out" :class="{ running: playState }">
      <div>ease-in-out</div>
    </div>
    <div class="ani-box linear" :class="{ running: playState }">
      <div>linear</div>
    </div>
    <div class="ani-box cubic-bezier" :class="{ running: playState }">
      <div>cubic-bezier</div>
    </div>
    <el-button type="primary" @click="handleAnimationRunning"
      >播放动画</el-button
    >
  </el-card>
</template>
<style scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 40px;
    text-align: center;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: wheat;
    font-size: 16px;
    margin-bottom: 20px;
    animation-name: move;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    animation-duration: 10s;
    animation-timing-function: linear;
  }

  .ani-box.ease {
    animation-timing-function: ease;
  }

  .ani-box.ease-in {
    animation-timing-function: ease-in;
  }

  .ani-box.ease-out {
    animation-timing-function: ease-out;
  }

  .ani-box.ease-in-out {
    animation-timing-function: ease-in-out;
  }

  .ani-box.linear {
    animation-timing-function: linear;
  }

  .ani-box.cubic-bezier {
    animation-timing-function: cubic-bezier(0.19, 1, 0.86, 0.01);
  }

  .ani-box.running {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(800px);
    }
  }
</style>
<script setup>
  import { ref } from "vue";
  const playState = ref(false);
  const handleAnimationRunning = () => {
    playState.value = true;
  };
</script>

运行结果：
animation-timing-function-ease

  • 函数值
    • cubic-bezier(0.1, 0.7, 1, 0.1) 开发者自定义的三次贝塞尔曲线，其中 p1 和 p3 的值必须在 0 到 1 的范围内。
  • Step 函数关键字，语法：steps(n, <jumpterm>)
    语法解析：按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。
    例如：如果 n 为 5，则有 5 个步骤。
    动画是否在 0%、20%、40%、60%、80%处，或 20%、40%、60%、80%、100%处暂停，或动画在 0%和 100%之间的 5 个定格，又或者在包括 0%和 100%的情况下设置 5 个定格（0%、25%、50%、75%、100%处），取决于 jumpterm 的值：
    • jump-start 表示一个左连续函数，因此第一个跳跃发生在动画开始时。
    • jump-end 表示一个右连续函数，因此第一个跳跃发生在动画结束时。
    • jump-none 两端都没有跳跃。
    • jump-both 在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。
    • start 等同于 jump-start
    • end 等同于 jump-end
      示例代码：
<template>
  <el-card header="animation-timing-function: steps(n, <jumpterm>)">
    <div class="ani-box jump-start" :class="{ running: playState }">
      <div>jump-start</div>
    </div>
    <div class="ani-box jump-end" :class="{ running: playState }">
      <div>jump-end</div>
    </div>
    <div class="ani-box jump-none" :class="{ running: playState }">
      <div>jump-none</div>
    </div>
    <div class="ani-box jump-both" :class="{ running: playState }">
      <div>jump-both</div>
    </div>
    <el-button type="primary" @click="handleAnimationRunning"
      >播放动画</el-button
    >
  </el-card>
</template>
<style scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 40px;
    text-align: center;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: wheat;
    font-size: 16px;
    margin-bottom: 20px;
    animation-name: move;
    animation-fill-mode: none;
    animation-play-state: paused;
    animation-duration: 10s;
  }

  .ani-box.jump-start {
    animation-timing-function: steps(5, jump-start);
  }

  .ani-box.jump-end {
    animation-timing-function: steps(5, jump-end);
  }

  .ani-box.jump-none {
    animation-timing-function: steps(5, jump-none);
  }

  .ani-box.jump-both {
    animation-timing-function: steps(5, jump-both);
  }

  .ani-box.running {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(800px);
    }
  }
</style>
<script setup>
  import { ref } from "vue";
  const playState = ref(false);
  const handleAnimationRunning = () => {
    playState.value = true;
  };
</script>

运行结果：
animation-timing-function-steps

animation-fill-mode

设置动画在执行之前和之后如何将样式应用于其目标。可选值：

  • none 当未执行动画时，动画将不会将任何样式应用于目标，而是以已经赋予该元素的样式来显示。这是默认值。
  • forward 动画执行完之后，目标将保留由执行遇到的最后一个关键帧计算值，最后一个关键帧取决于 animation-direction 和 animation-iteration-count 的值。
  • backwards 动画将在应用于目标时（执行前）立即应用第一个关键帧中定义的值，并在 animation-delay 期间保留此值。第一个关键帧取决于 animation-direction 的值。
  • both 动画将遵循 forwards 和 backwards 的规则，从而在两个方向上扩展动画属性。

示例代码：

<template>
  <el-card header="animation-fill-mode">
    <div class="ani-box none" :class="{ running: playState }">
      <div>none</div>
    </div>
    <div class="ani-box forwards" :class="{ running: playState }">
      <div>forwards</div>
    </div>
    <div class="ani-box backwords" :class="{ running: playState }">
      <div>backwards</div>
    </div>
    <div class="ani-box both" :class="{ running: playState }">
      <div>both</div>
    </div>
    <el-button type="primary" @click="handleAnimationRunning"
      >播放动画</el-button
    >
  </el-card>
</template>
<style scoped>
  .ani-box {
    width: 80px;
    height: 80px;
    background-color: darkcyan;
    border-radius: 40px;
    text-align: center;
    line-height: 80px;
    color: wheat;
    font-size: 16px;
    margin-bottom: 20px;
    animation-name: move;
    animation-play-state: paused;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
  }

  .ani-box.none {
    animation-fill-mode: none;
  }

  .ani-box.forwards {
    animation-fill-mode: forwards;
  }

  .ani-box.backwords {
    animation-fill-mode: backwards;
  }

  .ani-box.both {
    animation-fill-mode: both;
  }

  .ani-box.running {
    animation-play-state: running;
  }

  @keyframes move {
    0% {
      transform: translateX(200px);
    }

    100% {
      transform: translateX(500px);
    }
  }
</style>
<script setup>
  import { ref } from "vue";
  const playState = ref(false);
  const handleAnimationRunning = () => {
    playState.value = true;
  };
</script>

运行结果：
animation-fill-mode

animation

animation 是上面这些属性的一个简写属性形式。后续会单独写篇文章来详细介绍。

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

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

相关文章

密码学学习笔记(十二)：压缩函数 - Davies–Meyer结构

密码学学习笔记(十二)：压缩函数 - Davies–Meyer结构

密码学中压缩函数是指将输入的任意长度消息压缩为固定长度输出的函数。压缩函数以两个特定长度的数据为输入&#xff0c;产生与其中一个输入大小相同的输出。简单来说就是它接受一些较长的数据&#xff0c;输出更短的数据。 压缩函数接收长度为X和Y的两个不同输入&#xff0c;并…
阅读更多...
v1.1！最新版Weblogic漏洞利用工具

v1.1！最新版Weblogic漏洞利用工具

工具简介 迫于目前现有的weblogic工具没怎么更新、payloay jdk适用版本等问题&#xff0c;所以基于superman18、sp4zcmd等项目&#xff0c;写一个weblogic工具&#xff0c;工具运行版本要求jdk 8&#xff0c;支持漏洞检测、命令执行、内存马注入、密码解密等&#xff08;深信服…
阅读更多...
Linux进程理解【进程状态】

Linux进程理解【进程状态】

Linux进程理解【进程状态】 进程运行时&#xff0c;进程会被CPU调度&#xff0c;但系统中存在多个进程&#xff0c;进程运行的先后顺序等等该怎么保证呢&#xff1f;OS将进程分成了运行、睡眠、休眠、暂停、死亡等几种状态来对进程进行管理&#xff0c;下面我将带大家学习进程…
阅读更多...
工作--数组

工作--数组

一、遍历数组 1、filter&#xff1a; 新数组、return、条件表达式 &#xff08;不改变原数组&#xff09; 把满足条件的元素返回给 新数组&#xff0c;filter返回的是新数组 &#xff01;&#xff01;&#xff01;&#xff01; 赋值&#xff0c;会直接覆盖掉原来的值 使用…
阅读更多...
react useState useEffect useMemo实际业务场景中的使用

react useState useEffect useMemo实际业务场景中的使用

下面的代码实现了上面图片的功能 import React, { useMemo } from "react"; import "./HomeHead.less"; import Img from "../assets/images/timg.jpg";const HomeHead function HomeHead(props) {{ /*父组件传过来的值 */}let { today } pro…
阅读更多...
Gabor Filters

Gabor Filters

Gabor Filters: Manjunath, B. S., & Ma, W. Y. (1996). Texture features for browsing and retrieval of image data. IEEE Transactions on Pattern Analysis and Machine Intelligence, 18(8), 837-842. Gabor滤波器是一种基于Gabor函数的特定频率和方向选择性滤波器。…
阅读更多...
Go语言之流指针类型,new函数

Go语言之流指针类型,new函数

计算机中所有的数据都必须放在内存中&#xff0c;不同类型的数据占用的字节数不一样&#xff0c;例如 int 占用 4 个字节。为了正确地访问这些数据&#xff0c;必须为每个字节都编上号码&#xff0c;就像门牌号、身份证号一样&#xff0c;每个字节的编号是唯一的&#xff0c;根…
阅读更多...
MySQL-DDL-表结构操作

MySQL-DDL-表结构操作

DDL&#xff08;表操作&#xff09; 表的创建 以具体代码的显示展示如何进行数据表的创建 CREATE DATABASE <数据库名>;CREATE TABLE <表名> (<列名1> <数据类型1> <约束>,<列名2> <数据类型2> <约束>,... ) 具体代码示例&am…
阅读更多...
基于Spring Boot的高校专业学习预警系统设计与实现（Java+spring boot+MySQL）

基于Spring Boot的高校专业学习预警系统设计与实现（Java+spring boot+MySQL）

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的高校专业学习预警系统设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java sp…
阅读更多...
C++正则表达式校验某个字符串是否是合格的email

C++正则表达式校验某个字符串是否是合格的email

C正则表达式校验某个字符串是否是合格的email 可以借助正则表达式校验某个字符串是否是合规的电子邮箱。对于邮箱的正则表达式有严格的模式&#xff0c;如&#xff1a;^[a-zA-Z0-9_&*-](?:\\.[a-zA-Z0-9_&*-])*(?:[a-zA-Z0-9-]\\.)[a-zA-Z]{2,7}$ 对应的C实现如下&a…
阅读更多...
测试基础概念及常见开发模型和测试模型

测试基础概念及常见开发模型和测试模型

目录 1.需求的概念 2.测试用例 3.什么是BUG 4.软件的生命周期 5.开发模型和测试模型 开发模型 瀑布模型 快速原型模型 螺旋模型 增量模型 敏捷方法 scrum三大角色 测试模型 V模型 W模型 1.需求的概念 衡量软件测试结果的依据—需求 概念&#xff1a;满足用户期…
阅读更多...
变量与数据类型

变量与数据类型

专栏简介&#xff1a;本专栏作为Rust语言的入门级的文章&#xff0c;目的是为了分享关于Rust语言的编程技巧和知识。对于Rust语言&#xff0c;虽然历史没有C、和python历史悠远&#xff0c;但是它的优点可以说是非常的多&#xff0c;既继承了C运行速度&#xff0c;还拥有了Java…
阅读更多...
互联网未来信任锚点，后量子计算标准与迁移势在必行

互联网未来信任锚点，后量子计算标准与迁移势在必行

作者 | 宋慧 出品 | CSDN 云计算 图片 | 视觉中国 IT、数字化正在深刻改变和加速全行业的效率与创新。不过&#xff0c;互联网的信息通信安全基石——密码学技术仍在使用第一代公钥密码算法&#xff0c;而随着量子计算的产生发展&#xff0c;以离散对数和大数分解这类等价的数…
阅读更多...
深入理解网络通信和TCP、IP协议-01

深入理解网络通信和TCP、IP协议-01

1、网络协议 计算机网络是什么&#xff1f; 随着计算机技术发展&#xff0c;计算机的体积和价格都在下降&#xff0c;之前计算机多用于研究机构&#xff0c;现 阶段逐步进入一般的公司用于办公。原来计算机之间传输数据需要通过软盘等第三方存储介 质进行转存&#xff0c;人们…
阅读更多...
【CXL】CXL ATS 介绍

【CXL】CXL ATS 介绍

&#x1f525;点击查看精选 CXL 系列文章&#x1f525; &#x1f525;点击进入【芯片设计验证】社区&#xff0c;查看更多精彩内容&#x1f525; &#x1f4e2; 声明&#xff1a; &#x1f96d; 作者主页&#xff1a;【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0c…
阅读更多...
《代码随想录》专题：二叉树的遍历

《代码随想录》专题：二叉树的遍历

0、二叉树的遍历方式总结 二叉树主要有两种遍历方式 深度优先遍历&#xff1a;先往深走&#xff0c;遇到叶子节点再往回走。广度优先遍历&#xff1a;一层一层的去遍历。 从深度优先遍历和广度优先遍历进一步拓展&#xff0c;才有如下遍历方式 深度优先遍历 前序遍历&#xff…
阅读更多...
【网络编程】网络编程核心概念与模式

【网络编程】网络编程核心概念与模式

配套环境 vscode、gcc、ubuntu22.04 概念描述 网络编程的本质 使用操作系统提供的接口函数&#xff0c;使得应用程序具备收发网络数据的能力。 网络接口在代码层面是操作系统提供的函数 应用程序通过网络接口使用操作系统的联网能力 网络编程核心概念 协议&#xff1a;为进…
阅读更多...
STM32——led灯的点亮+闪烁+流水灯的实现

STM32——led灯的点亮+闪烁+流水灯的实现

文章目录 一、LED点亮1.原理2.寄存器方式--代码3.库函数--代码4.结果展示 二、LED闪烁三、LED流水灯1.代码2.结果展示 一、LED点亮 1.原理 其方式有两种一种是寄存器方式一种是库函数方式&#xff0c;但其原理都是一样的。如原理图所示&#xff0c;与LED相连接的IO口置低电平…
阅读更多...
HTML学习 第一部分（前端学习）

HTML学习 第一部分（前端学习）

参考学习网站: 网页简介 (w3schools.com) 我的学习思路是&#xff1a;网站实践视频。 视频很重要的&#xff0c;因为它会给你一种开阔思路的方式。你会想&#xff0c;噢&#xff01;原来还可以这样。这是书本或者网站教程 所不能教给你的。而且&#xff0c;对一些教程&#…
阅读更多...
【深度解析】OSPF-开放式最短路径优先协议

【深度解析】OSPF-开放式最短路径优先协议

目录 重点&#xff1a; VPN---Virtual Private Network(虚拟专用网络隧道) OSPF网络类型&#xff1a; 表格视图&#xff1a; P2P---点对点协议 BMA---广播多路访问网络 NBMA---非广播多路访问网络 P2MP---点对多点协议 OSPF认证&#xff1a;检测类型&#xff0b;密码 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023