CSS transition详解

文章目录

    • 属性
      • transition-property
      • transition-duration
      • transition-timing-function
      • transition-delay
      • transition 简写属性
    • 方法
      • Element：transitionrun 事件
      • Element：transitionstart 事件
      • Element：transitionend 事件
      • Element：transitioncancel 事件
    • 示例
      • 方块旋转
      • 事件监听
      • 小球移动
    • 注意

CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。

比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。

通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。

CSS 过渡可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，如线性或先快后慢）。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

开发者可以定义哪一属性需以何种方式用于动画，由此允许创造复杂的过渡。然而因为为某些属性赋予动画无意义，所以这些属性无动画性。

备注： auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，实现了这个需求；然而另外一些用户代理，比如基于 WebKit 的，没有这么严格限制。在 auto 上使用动画，取决于浏览器及其版本，可能会导致非预期结果，应当避免使用。

属性

以下 transition 属性，若有多个属性值，则以,（逗号）衔接。

transition-property

指定哪个或哪些 CSS 属性名称用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。

取值如下：

  • none：没有过渡动画。
  • all（初始值）：所有可被动画的属性都表现出过渡动画。
  • <custom-ident>：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个不能为非破折号字符或数字。同时，不能以两个破折号开头。通俗来说就是可以是自定义名称也可以是css规范中的属性名。

transition-duration

表示过渡属性从旧的值转变到新的值所需要的时间。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长。

该属性值以秒（s）或毫秒（ms）为单位指定过渡动画所需的时间。默认值为 0s，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。

如果某个属性的值列表小于 transition-property 的属性值数量，那么时长列表会重复，重复规则是按照现有值进行重复。例如：

如3s，则重复多个3s

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s;
}

将视为：

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 3s, 3s, 3s;
}

如果是3s，5s，则会重复多个3s，5s。

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

将视为：

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

类似地，如果某个属性的值列表长于 transition-property 的属性值数量，将被截短。例如：

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

将按下面这样处理：

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

transition-timing-function

CSS 属性受到过渡效应(transition effect)的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。初始值是ease。

缓动函数定义属性如何计算。大多数缓动函数由四点定义一个立方贝塞尔曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。这条加速度曲线被<timing-function>所定义，之后作用到每个 CSS 属性的过渡。

通过transition-property中定义的过渡属性，每个<timing-function> 的值与这个过渡属性相对应.

你可以指定 <timing-function> 个数少于或者多于属性个数。重复或者裁剪规则与transition-duration一致。

形式语法如下：

transition-timing-function = 
  <easing-function>#  

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

语法书写示例如下：

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

transition-delay

表明动画效果属性生效之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，初始值为0s。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡从值的绝对值时刻开始。

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的 css 属性（transition-property）。延迟时间个数少于或者多于属性个数。重复或者裁剪规则与transition-duration一致。

transition 简写属性

transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。

简写属性 CSS 语法如下：

transition: <property> <duration> <timing-function> <delay>;

CSS 过渡通常使用简写属性 transition 控制。这是最好的方式，可以避免属性值列表长度不一，节省在 CSS 代码上调试的时间。

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

每个单属性转换都描述了应该应用于单个属性的转换（或特殊值all和none）。这包括：

  • 零或一个值，表示转换应适用的属性。这可能是以下任何一种：
    • 关键字none
    • 关键字all
    • 命名 CSS 属性的 <custom-ident> 。
  • 零或一个 <single-transition-timing-function> 值表示要使用的过渡函数
  • 零，一或两个

当transition属性的值个数超过可以接收的值的个数时该如何处理。简而言之，当transition属性的值个数超过可以接收的值的个数时，多余的值都会被忽略掉，不再进行解析。

标准语法

transition = 
  <single-transition>#  

<single-transition> = 
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>                                   

<single-transition-property> = 
  all             |
  <custom-ident>

语法使用示例

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
  margin-right 4s,
  color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: unset;

方法

Element：transitionrun 事件

当CSS transition 首次创建时，将触发 transitionrun 事件，即在任何 transition-delay 已经开始之前。此事件不可取消。

在addEventListener()方法中使用事件名称，或设置事件处理程序。

element.addEventListener("transitionrun", (event) => {});

element.ontransitionrun = (event) => {};

从其父接口 Event 继承属性，事件属性如下。

  • TransitionEvent.propertyName

    一个包含与transition相关联的CSS属性名称的字符串。

  • TransitionEvent.elapsedTime

    一个浮点数，给出此事件触发时transition运行的时间，单位为秒。此值不受过渡延迟特性的影响。对于 transitionstart 事件，elapsedTime 的值为 0.0（除非将 transition-delay 设置成了一个负值，在这种情况下，elapsedTime 为 (-1 * transition-delay)）。

  • TransitionEvent.pseudoElement

    一个字符串，以 :: 开头，包含了transition 运行时所在的伪元素的名称。如果transition不是在伪元素而是在元素上运行，则为空字符串：‘’。

下面几种transition事件方法，与此一致。

Element：transitionstart 事件

transitionstart 事件会在 CSS transition 实际开始的时候触发，或者说在某个 transition-delay 已经结束之后触发。

下列代码对 transitionstart 事件添加了一个监听器：

element.addEventListener("transitionstart", () => {
  console.log("transition 开始");
});

一样的代码，但是使用 ontransitionstart 属性来替代 addEventListener()：

element.ontransitionstart = () => {
  console.log("transition 开始");
};

Element：transitionend 事件

当CSS transition 完成时，将触发 transitionend 事件。此事件不可取消。

以下情况将不会触发transitionend事件

  1. 如果在完成之前删除了 transition，例如删除了 transition-property 或将 display 设置为 none ，则将不会触发该事件。
  2. 如果 transition-delay 或 transition-duration都是0s或两者都没有声明，则没有转换，也不会触发任何transition事件。
  3. 如果触发了 transitioncancel 事件，则 transitionend 事件将不会触发。

在addEventListener()方法中使用事件名称，或设置事件处理程序。

addEventListener("transitionend", (event) => {});

ontransitionend = (event) => {};

Element：transitioncancel 事件

transitioncancel 事件在 CSS 转换被取消时触发。

当以下情况时，过渡被取消：

  • 应用于目标的transition-property属性的值被更改
  • display属性被设置为"none"。
  • 转换在运行到完成之前就停止了，例如通过将鼠标移出悬浮过渡元素。

在addEventListener()方法中使用事件名称，或设置事件处理程序。

addEventListener("transitioncancel", (event) => {});

ontransitioncancel = (event) => {};

示例

方块旋转

<div class="box duration-1">0.5 秒</div>

<div class="box duration-2">2 秒</div>

<div class="box duration-3">4 秒</div>

<button id="change">变换</button>

.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}

function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);

事件监听

在下面的例子中，我们有一个简单的div元素，并设置了一个包含 delay 的 transition 样式。

<div class="transition">Hover over me</div>
<div class="message"></div>

.transition {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: transform, background;
  transition-duration: 5s;
  transition-delay: 2s;
}

.transition:hover {
  transform: rotate(90deg);
  background: silver;
}

对此，我们再添加一些 JavaScript 代码来指出 transitionstart 和 transitionrun 事件在哪里触发。

const domTransition = document.querySelector(".transition");
const domMessage = document.querySelector(".message");

// 触发transitioncancel事件
domTransition.onclick = function () {
  // 点击元素使display属性被设置为"none"
  domTransition.style.display = "none";
  timeout = window.setTimeout(appear, 2000);
  function appear() {
    domTransition.style.display = "block";
  }
  
  // 或点击元素使应用于目标的transition-property属性的值被更改
  // domTransition.style.transitionProperty = 'width'
};

domTransition.addEventListener("transitionrun", function (e) {
  domMessage.textContent = "transitionrun 触发了"
  console.log(e.propertyName+'触发了transitionrun') // 重复两次, e.propertyName不同
});

domTransition.addEventListener("transitionstart", function (e) {
  domMessage.textContent = "transitionstart 触发了"
  console.log(e.propertyName+'触发了transitionstart') // 重复两次, e.propertyName不同
});

// 鼠标移出悬浮过渡元素或点击使元素消失会触发
domTransition.addEventListener("transitioncancel", function (e) {
  domMessage.textContent = "transitioncancel 触发了"
  console.log(e.propertyName+'触发了transitioncancel') // 重复两次, e.propertyName不同
});

domTransition.addEventListener("transitionend", function (e) {
  domMessage.textContent = "transitionend 触发了"
  console.log(e.propertyName+'触发了transitionend') // 重复两次, e.propertyName不同
});

不同的地方是：

  • transitionrun 在 transition 创建的时候被触发。（或者说在某个 delay 开始的时候）
  • transitionstart 在动画实际开始的时候被触发。 (或者说在某个 delay 结束的时候)

小球移动

过渡可以使事情看起来更顺畅，而不需要对你的 JavaScript 功能做任何处理。

<p>随便点击某处来移动球</p>
<div class="ball"></div>

使用 JavaScript 将球移动到一个位置：

const el = document.querySelector('.ball');
document.addEventListener(
  "click",
  (ev) => {
    el.style.transform = `translateY(${ev.clientY - 25}px)`;
    el.style.transform += `translateX(${ev.clientX - 25}px)`;
  },
  false,
);

使用 CSS 来平滑移动，只需简单地添加一个过渡效果：

.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

注意

在以下场景之后，应注意transition的使用：

  • 使用 .appendChild() 向 DOM 中添加元素
  • 移除元素的 display: none 属性

这就好像初始状态从未发生过，元素一直处于最终状态一样。

克服这个限制的简单方法是在修改过渡的CSS属性之前应用若干毫秒的 setTimeout() 函数。

  • 如下演示，如何规避使用 .appendChild() 向 DOM 中添加元素，动效不生效问题。

    还是用上面小球移动的示例，复用css。

    修改js如下：

    const domDiv = document.createElement('div');
domDiv.className = 'ball';
document.body.appendChild(domDiv);

setTimeout(() => {
  domDiv.style.transform = 'translate(100px, 100px)';
}, 20)

  • 如下演示，如何规避移除元素的 display: none 属性，动效不生效问题。

    还是用上面小球移动的示例，复用css，在这基础上添加 display: none;

    修改js如下：

    const domBall = document.querySelector('.ball');
domBall.style.display = 'block';

setTimeout(() => {
  domBall.style.transform = 'translate(100px, 100px)';
}, 20)

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据表示和进制转换

数据表示和进制转换

输入计算机的数字、字符、符号等信息必须转换成0、1组合的数据形式才能被计算机接收、存储并进行运算。能够进行算术运算并且得到明确的数值的数据概念的信息叫数值数据&#xff0c;其余的信息成为非数值数据。 权&#xff1a;每位数的数值。 基数&#xff1a;指该进位制中允…
阅读更多...
【C初阶——指针2】鹏哥C语言系列文章，基本语法知识全面讲解——指针（2）

【C初阶——指针2】鹏哥C语言系列文章，基本语法知识全面讲解——指针（2）

崩刃的剑&#xff0c;依旧致命&#xff0c;锈蚀的盾&#xff0c;屹立如初&#xff08;王者荣耀李信&#xff09; 本文由睡觉待开机原创&#xff0c;转载请注明出处。 本内容在csdn网站首发 欢迎各位点赞—评论—收藏 如果存在不足之处请评论留言&#xff0c;共同进步&#xff0…
阅读更多...
Elasticsearch：结合 ELSER 和 BM25 文本查询的相关搜索

Elasticsearch：结合 ELSER 和 BM25 文本查询的相关搜索

Elastic Learned Spare EncodeR (ELSER) 允许你执行语义搜索以获得更相关的搜索结果。 然而&#xff0c;有时&#xff0c;将语义搜索结果与常规关键字搜索结果相结合以获得最佳结果会更有用。 问题是&#xff0c;如何结合文本和语义搜索结果&#xff1f; 首先&#xff0c;让我…
阅读更多...
揭秘Linux软链接：如何轻松创建、删除和修改

揭秘Linux软链接：如何轻松创建、删除和修改

揭秘Linux软链接&#xff1a;如何轻松创建、删除和修改 一、简介二、创建软链接三、删除软链接四、修改软链接五、Linux软链接的高级用法六、总结 一、简介 在Linux中&#xff0c;软链接&#xff08;Symbolic Link&#xff09;是一种特殊的文件类型&#xff0c;它是一个指向另…
阅读更多...
初识对抗生成网络(GAN)

初识对抗生成网络(GAN)

在研究语义通信的时候&#xff0c;发现解码端很多都是用GAN或基于GAN来完成的。带着对GAN的好奇&#xff0c;对GAN进行了一个初步学习。这篇文章介绍一下和GAN相关的一些常识吧~   本文围绕以下几个内容展开&#xff1a;     1.什么是GAN&#xff1f;     2.为什么要…
阅读更多...
03-微服务-Ribbon负载均衡

03-微服务-Ribbon负载均衡

Ribbon负载均衡 1.1.负载均衡原理 SpringCloud底层其实是利用了一个名为Ribbon的组件&#xff0c;来实现负载均衡功能的。 那么我们发出的请求明明是http://userservice/user/1&#xff0c;怎么变成了http://localhost:8081的呢&#xff1f; 1.2.源码跟踪 为什么我们只输入…
阅读更多...
FOURANDSIX:2.01

FOURANDSIX:2.01

靶场下载 FourAndSix: 2.01 ~ VulnHub 信息收集 # nmap -sn 192.168.1.0/24 -oN live.nmap Starting Nmap 7.94 ( https://nmap.org ) at 2024-01-02 10:42 CST Nmap scan report for 192.168.1.1 Host is up (0.00030s latency). MAC Address: 00…
阅读更多...
JavaScript 基础三part1.数组

JavaScript 基础三part1.数组

JavaScript 基础三part1.数组 2.1 数组是什么2.2 数组的基本使用&#xff08;1&#xff09;声明&#xff08;2&#xff09;取值&#xff08;3&#xff09;一些术语&#xff08;4&#xff09;遍历数组 2.3 操作数组&#xff08;1&#xff09;修改&#xff08;2&#xff09;新增&…
阅读更多...
SpringBoot日志打印Logback详解【子节点详解】【附案例】

SpringBoot日志打印Logback详解【子节点详解】【附案例】

笑小枫的专属目录 1. 背景2. 什么是Logback3. SpringBoot使用logback介绍4. 自定义logback配置5. 如何把日志同步到ES中6. logback配置属性详解根节点< configuration>子节点:< property>子节点:< appender>filetargetappendprudentlayout和encoderlayout和e…
阅读更多...
Spring的bean的生命周期！！！

Spring的bean的生命周期！！！

一.单例模式 单例&#xff1a;[启动容器]--->通过构造方法&#xff08;创建对象&#xff09;---->调用set方法&#xff08;注入&#xff09;--->调用init方法&#xff08;初始化&#xff09;----[容器关闭]----->调用destroy方法&#xff08;销毁&#xff09; app…
阅读更多...
任务需求分析中的流程图、用例图、er图、类图、时序图线段、图形的作用意义

任务需求分析中的流程图、用例图、er图、类图、时序图线段、图形的作用意义

任务需求分析中的流程图、用例图、er图、类图、时序图线段、图形的作用意义 流程图 流程图中各种图形的含义及用法解析 连接线符号 连接各要素&#xff0c;表示流程的顺序或过程的方向。 批注符号 批注或说明&#xff0c;也可以做条件叙述。 子流程 流程中一部分图形的逻辑…
阅读更多...
SpringMVC通用后台管理系统源码

SpringMVC通用后台管理系统源码

SpringMVC通用后台管理系统源码 整体的SSM后台管理框架功能已经初具雏形&#xff0c;前端界面风格采用了结构简单、 性能优良、页面美观大的Layui页面展示框架 数据库支持了SQLserver,只需修改配置文件即可实现数据库之间的转换。 系统工具中加入了定时任务管理和cron生成器&am…
阅读更多...
代码随想录27期|Pthon|Day31|贪心算法|理论基础|455.分发饼干|376. 摆动序列|53. 最大子序和

代码随想录27期|Pthon|Day31|贪心算法|理论基础|455.分发饼干|376. 摆动序列|53. 最大子序和

理论基础 首先&#xff0c;贪心算法基本靠“做题感觉”&#xff0c;所以没有规范的总结和做题技巧&#xff0c;只能说见到过之后还能想起来。 一般情况可以看成是对于一个大的问题的子问题的局部最优的求解&#xff0c;然后可以推导出全局的最优。 这个过程没有证明&#xf…
阅读更多...
【C#】知识点实践序列之Lock的锁定代码块

【C#】知识点实践序列之Lock的锁定代码块

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂之知识点实践序列》文章。 2024年第1篇文章&#xff0c;此篇文章是C#知识点实践序列之Lock知识点&#xff0c;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 本篇验证Lock锁定代…
阅读更多...
常用环境部署(十三)——GitLab整体备份及迁移

常用环境部署(十三)——GitLab整体备份及迁移

一、GitLab备份 注意&#xff1a;由于我的GitLab是docker安装的&#xff0c;所以我的操作都是在容器内操作的&#xff0c;大家如果不是用docker安装的则直接执行命令就行。 1、Docker安装GitLab 链接&#xff1a;常用环境部署(八)——Docker安装GitLab-CSDN博客 2、GitLab备…
阅读更多...
Python常用模块之hashlib

Python常用模块之hashlib

常用模块 - hashlib模块 一、简介 Python的hashlib提供了常见的摘要算法&#xff0c;如MD5、SHA1、SHA224、SHA256、SHA384、SHA512等算法。 什么是摘要算法呢&#xff1f;摘要算法又称哈希算法、散列算法。它通过一个函数&#xff0c;把任意长度的数据转换为一个长度固定的…
阅读更多...
C# 全屏label控件实现的贪吃蛇。

C# 全屏label控件实现的贪吃蛇。

C# 全屏label控件实现的贪吃蛇。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using stat…
阅读更多...
两阶段提交协议三阶段提交协议

两阶段提交协议三阶段提交协议

两阶段提交协议 分布式事务是指会涉及到操作多个数据库的事务,在分布式系统中&#xff0c;各个节点之间在物理上相互独立&#xff0c;通过网络进行沟通和协调。 XA 就是 X/Open DTP 定义的交易中间件与数据库之间的接口规范&#xff08;即接口函数&#xff09;&#xff0c;交易…
阅读更多...
网络安全—模拟ARP欺骗

网络安全—模拟ARP欺骗

文章目录 网络拓扑安装使用编辑数据包客户机攻击机验证 仅做实验用途&#xff0c;禁止做违法犯罪的事情&#xff0c;后果自负。当然现在的计算机多无法被欺骗了&#xff0c;开了防火墙ARP欺骗根本无效。 网络拓扑 均使用Windows Server 2003系统 相关配置可以点击观看这篇文章…
阅读更多...
安卓和Android是两种不同的操作系统？

安卓和Android是两种不同的操作系统？

实际上&#xff0c;安卓和Android并不是同一种操作系统&#xff01; Android是由Google开发并维护更新的一款操作系统&#xff0c;目前仅能运行在Pixel手机上。 Google Pixel 与 iPhone手机&#xff1a;哪个更好&#xff1f;Google Pixel 与 Apple iPhone哪个手机才是性价比最…
阅读更多...
最新文章

Copyright @ 2022~2023