使用CSS实现多种Noise噪点效果

news2025/1/18 16:47:04

在插画中添加噪点肌理可以营造出一种自然的氛围。噪点肌理可以用于塑造阴影、高光、深度以及更多细节，并优化插画质感，应用噪点肌理的方式在扁平插画中广受欢迎。

在前端开发过程中，我们也有可能遇到噪点插画风格的设计稿，应用基础的前端开发知识，能不能实现噪点风格的样式呢，本文主要内容主要就是通过几个示例来实现几种噪点效果。本文包含的知识点包括：CSS 属性 mask 遮罩、SVG 滤镜 feTurbulence、CSS 属性 filter 滤镜、CSS 属性 mix-blend-mode 元素混合、CSS 属性 image-rendering 图像缩放等。

开始本文主要内容之前，我们先来欣赏几张设计师在插画作品中应用噪点肌理的优秀例子。

作品链接 dribbble.com

作品链接 dribbble.com

作品链接 dribbble.com

知识汇总

PS 实现

在 Photoshop 中增加噪点效果的基础操作方法：

  • 混合模式（溶解）+ 柔和笔刷（做暗灰亮）
  • 添加材质（正片叠底）
  • 图层样式（内阴影，投影等）
  • 噪点笔刷绘制

知识点

本文中将用到以下几个 CSS 特性，正式开发之前先简单了解下。

💡 mask

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

基本用法：

// 使用位图来做遮罩
mask: url(mask.png);
// 使用 SVG 图形中的形状来做遮罩
mask: url(masks.svg#star);

🔗 详细用法可访问：MDN

💡 feTurbulence

在 SVG 中，feTurbulence 滤镜利用 Perlin 噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。本文中将利用该滤镜生成噪点背景图片。

🔗 详细用法可访问：MDN

💡 filter

CSS 属性 filter 将模糊或颜色偏移等图形效果应用于元素。可以为元素添加滤镜效果，本文中主要应用它来增强噪点视觉效果。

🔗 详细用法可访问：MDN，也可访问我的另外一篇文章《CSS filter 有哪些神奇用途》，其中有 filter 应用的详细介绍。

💡 mix-blend-mode

CSS 属性 mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

基本语法：

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

不同 mix-blend-mode 效果：

🔗 详细用法可访问：MDN

💡 image-rendering

CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

基本语法：

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

其中：

  • auto：自动，自 Gecko 1.9 起，使用双线性算法进行重新采样。
  • crisp-edges：必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。
  • pixelated：放大图像时，使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 auto 相同。

🔗 详细用法可访问：MDN

效果

以下页面是本文实现的多种噪点效果。

  • 👀 在线预览: https://codepen.io/dragonir/full/rNdrmzB
  • 👀 在线预览: NOISE 噪点

实现

定义 CSS 全局变量。

:root {
  --black: #000000;
  --blue: #0072ff;
  --green: #03c03c;
  --yellow: #fffc00;
  --red: #ff4b2b;
  --orange: #f5af19;
  --pink: #ee9ca7;
  --purple: #a770ef;
}

创建一个 SVG 噪点背景，后续将使用创建的 SVG 元素作为其他元素的噪点背景。

<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noise'>
    <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' />
  </filter>
  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

类型0 🌚

通过给 background 添加 linear-gradient 和噪点图片背景，就可实现渐变的噪点效果。

<div class="noise_0"></div>

.noise_0 {
  background: linear-gradient(to right bottom, var(--black), rgba(0, 0, 0, 0)), url(#noise);
}

类型1 🌑

在上面的基础上，通过修改 filter 属性的对比度 contrast 和亮度 brightness，增强噪点效果得对比度。

<div class="noise_1"></div>

.noise_1 {
  filter: contrast(200%) brightness(150%);
}

类型2 🌒

使用 mix-blend-mode: multiply 实现混合双色渐变的噪点效果。

<div class="noise noise_2">
  <div class="isolate">
    <div class="gradient"></div>
    <div class="overlay"></div>
  </div>
</div>

.noise_2 {
  position: relative;
}
.noise_2 .isolate {
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 100%;
}
.noise_2 .overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--purple);
  mix-blend-mode: multiply;
}
.noise_2 .gradient {
  height: 100%;
  width: 100%;
  filter: contrast(200%) brightness(150%);
  background: linear-gradient(to right bottom, var(--black), rgba(0, 0, 0, 0)), url(#noise);
}

类型3 🌓

圆形的噪点元素。

<div class="noise_3">
  <div class="gradient"></div>
</div>

.noise_3 {
  border-radius: 50%;
}
.noise_3 {
  background: var(--black);
}
.noise_3 .gradient {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 100% 0, transparent 20%, #cccccc 80%);
  mask: url(#noise), radial-gradient(circle at 100% 0, transparent 10%, #000 60%);
}

类型4 🌔

球形的噪点元素，给圆形噪点添加地面阴影和光照效果就能形成立体的球体效果。

<div class="noise noise_5">
  <div class="ground"><div class="ground-shadow"></div></div>
  <div class="ball">
    <div class="isolate">
      <div class="ball-shadow"></div>
      <div class="ball-light"></div>
    </div>
  </div>
</div>

<style>
.noise_5 {
  position: relative;
}
.noise_5 .ball {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 20;
}
.noise_5 .isolate {
  isolation: isolate;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.noise_5 .ball-shadow {
  height: 100%;
  background: radial-gradient(circle at 65% 35%, rgba(0, 0, 0, 0), mediumblue), url(#noise);
  filter: contrast(120%) brightness(900%);
}
.noise_5 .ground {
  position: absolute;
  width: 150%;
  height: 140px;
  bottom: -10px;
  left: -65%;
  transform: rotateZ(7deg);
  mix-blend-mode: multiply;
}
.noise_5 .ground-shadow {
  width: 95%;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 70%, navy, rgba(0, 0, 0, 0)), url(#noise);
  filter: contrast(150%) brightness(700%);
}
.noise_5 .ball-light {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 67% 30%, #ccc, var(--black));
}
</style>

类型5 🌕

其他 3D 立体形状，包括球体、布丁 🍮、水滴 💧、花瓶 🏺、鸡蛋 🥚、红细胞 💉等，🖱 鼠标悬浮到元素上面可以看到三维旋转效果。

<div class="item item--sphere item--color1"></div>
<div class="item item--pudding item--color5"></div>
<div class="item item--droplet item--color6"></div>
<div class="item item--vase item--color7"></div>
<div class="item item--egg item--color8"></div>
<div class="item item--cell"></div>

.item {
  background-color: #ffecd2;
  box-shadow: -5px 18px 25px -15px;
  overflow: hidden;
  transition: all 0.2s ease-out;
  image-rendering: pixelated;
}
.item::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 5%, #000 80%) 0 0/50% 100%;
}
.item:hover {
  transform: scale(1.05);
}
.item:hover.item::before, .item:hover.item::after {
  animation: spin-round 3.5s linear infinite;
}
.item:active {
  animation: hue-rotate 7s infinite;
}
.item--sphere {
  border-radius: 50%;
}
.item--egg {
  width: 100.1px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}
.item--pudding {
  width: 130px;
  height: 130px;
  border-radius: 50% 50% 10% 10%;
}
.item--pudding::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 55%, #000 85%) 0 0/50% 100%;
}
.item--droplet {
  width: 100.1px;
  height: 100.1px;
  border-radius: 5% 100% 50% 65%/5% 65% 50% 100%;
  transform: rotate(45deg);
  box-shadow: 5px 18px 25px -15px;
}
.item--droplet:hover {
  transform: rotate(45deg) scale(1.05);
}
.item--vase {
  position: relative;
  width: 80px;
  height: 130px;
  border-radius: 40% 40% 70% 70%/100%;
}
.item--vase::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 55%, #000 90%) 0 0/50% 100%;
}
.item--cell {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  color: #ff4d5d;
  background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d;
}
.item--cell::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 0 75%, transparent 20%, #98000e 65%);
  mask: url(#noise), radial-gradient(circle at 50%, transparent 25%, #000 75%);
}
.item--cell:hover {
  animation: spin-flat-thick 3.5s linear infinite;
}
.item--cell:hover.item--cell::before {
  animation: spin-flat 3.5s linear infinite;
}
.item--cell:hover:active {
  animation: spin-flat-thick 3.5s linear infinite, hue-rotate 7s linear infinite;
}
.item--color1 {
  color: #7f5fff;
}
.item--color1::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #7f5fff 65%);
}
.item--color5 {
  color: #3d1635;
  background-color: #ffecd2;
}
.item--color5::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 15%, #e7627d 45%);
}
.item--color5::after {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 50%, #3d1635 75%);
}
.item--color6 {
  background-color: #72f9c1;
  color: #5193ff;
}
.item--color6::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #5193ff 65%);
}
.item--color7 {
  color: #5e21d6;
  background-color: #fec440;
}
.item--color7::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 15%, #fd2472 45%);
}
.item--color7::after {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 50%, #5e21d6 75%);
}
.item--color8 {
  color: #222;
}
.item--color8::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #222 65%);
}

类型6 🌝

多个噪点元素地叠加可以生成非常惊艳的效果，比如通过将三个噪点元素层叠在一起可以实现光学三原色 RGB 效果。

<div class="noise_6">
  <div class="circle noise-1"></div>
  <div class="circle noise-2"></div>
  <div class="circle noise-3"></div>
</div>

.noise_6 .circle {
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}
.noise_6 .noise-1 {
  position: absolute;
  top: 0;
  left: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(0,255,255,1), rgba(0,0,0,0)), url(#noise);
}
.noise_6 .noise-2 {
  position: absolute;
  left: 10%;
  top: -30px;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,255,1), rgba(0,0,0,0)), url(#noise);
}
.noise_6 .noise-3 {
  position: absolute;
  top: 50px;
  left: 4%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,0,1), rgba(0,0,0,0)), url(#noise);
}

类型7 🌙

利用噪点元素还可以实现什么呢？中心扩散效果，太阳，涟漪，荷包蛋……

<div class="noise_7">
  <div class="noise"></div>
  <div class="center">
    <div class="circle">
    </div>
  </div>
</div>

<style>
.noise_7 {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}
.noise_7 .noise {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), url(#noise);
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}
.noise_7 .center {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.noise_7 .circle {
  width: 200px;
  height: 200px;
  background-color: beige;
  border-radius: 50%;
}
</style>

背景噪点 🌜

如果仔细观察的话，页面黑色背景也应用了噪点效果，是不是有一种黑白电视机的雪花屏复古感 😂。

<div class="bg"></div>

.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url(#noise) repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
}
@keyframes bg-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

📥 完整代码：GitHub - dragonir/noise: noise 噪点效果

总结

本文主要包含的知识点包括：

  • CSS 属性 mask 遮罩
  • SVG 滤镜 feTurbulence
  • CSS 属性 filter 滤镜
  • CSS 属性 mix-blend-mode 元素混合
  • CSS 属性 image-rendering 图像缩放

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

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

相关文章

实验三-----数据库

实验三-----数据库

一、实验目的 1.掌握SQL Server Management Studio中SQL 查询操作&#xff1b; 2.掌握SQL 的单表查询命令&#xff1b; 3.掌握SQL 的连接查询操作&#xff1b; 4.掌握SQL 的嵌套查询操作&#xff1b; 5.掌握SQL 的集合查询操作。 二、实验环境 1&#xff0e;实验室名称&…
阅读更多...
Nevron 3DChart创建有吸引力的3D和2D图表

Nevron 3DChart创建有吸引力的3D和2D图表

Nevron 3DChart创建有吸引力的3D和2D图表 3DChart使用OpenGL 3D图形引擎创建复杂的2D和3D图表和图形，这些图表和图形可以包含静止或动画图像。3DChart包括用于生成图表模板的独立应用程序和ASP服务器配置实用程序。该组件还包括一个专门设计用于与3DChart集成的工具栏组件。用…
阅读更多...
SignalR简介及实践指南

SignalR简介及实践指南

SigalR简介 ASP.NET Core SignalR 是一个开放源代码库&#xff0c;可用于简化向应用添加实时 Web 功能。 实时 Web 功能使服务器端代码能够将内容推送到客户端。 适合 SignalR 的候选项&#xff1a; 需要从服务器进行高频率更新的应用。 示例包括游戏、社交网络、投票、拍卖…
阅读更多...
【LeetCode】No.102. Binary Tree Level Order Traversal -- Java Version

【LeetCode】No.102. Binary Tree Level Order Traversal -- Java Version

题目链接&#xff1a;https://leetcode.com/problems/binary-tree-level-order-traversal/ 1. 题目介绍&#xff08;Binary Tree Level Order Traversal&#xff09; Given the root of a binary tree, return the level order traversal of its nodes’ values. (i.e., from …
阅读更多...
React Redux 中触发异步副作用

React Redux 中触发异步副作用

React Redux 中触发异步副作用 一些基本的配置&#xff08;这里使用 toolkit&#xff09;可以在这篇笔记中找到&#xff1a;react-redux 使用小结&#xff0c;这里不多赘述。 触发副作用主流的操作方式有两种&#xff1a; 组件内操作 适合只会在当前组件中触发的 API 操作 写…
阅读更多...
企业数仓DQC数据质量管理实践篇

企业数仓DQC数据质量管理实践篇

一.数据质量管理背景 以大数据平台的核心理念是构建于业务之上&#xff0c;用数据为业务创造价值。大数据平台、数据仓库的搭建之初&#xff0c;优先满足业务的使用需求&#xff0c;数据质量往往是被忽视的一环。但随着业务的逐渐稳定&#xff0c;数据质量越来越被人们所重视。…
阅读更多...
2.1.3 运算放大器的参数以及选型、静态、交流技术指标

2.1.3 运算放大器的参数以及选型、静态、交流技术指标

笔者电子信息专业硕士毕业&#xff0c;获得过多次电子设计大赛、大学生智能车、数学建模国奖&#xff0c;现就职于南京某半导体芯片公司&#xff0c;从事硬件研发&#xff0c;电路设计研究。对于学电子的小伙伴&#xff0c;深知入门的不易&#xff0c;特开次博客交流分享经验&a…
阅读更多...
基于小脑模型神经网络轨迹跟踪matlab程序

基于小脑模型神经网络轨迹跟踪matlab程序

1 CMAC概述 小脑模型神经网络(Cerebellar Model Articulation Controller,CMAC)是一种表达复杂非线性函数的表格查询型自适应神经网络&#xff0c;该网络可通过学习算法改变表格的内容&#xff0c;具有信息分类 存储的能力。 CMAC把系统的输入状态作为一个指针&#xff0c;把相…
阅读更多...
Oracle-Autoupgrade方式升级19c

Oracle-Autoupgrade方式升级19c

前言: Autoupgrade是Oracle 推出的自动升级工具&#xff0c;通过该工具可以将数据库升级为Oracle12.2之后的版本&#xff0c;工具支持升级前的检查、升级问题修复、一键式自动升级以及升级后的问题修复&#xff0c;极大的简化数据库的升级步骤。 支持的目标升级版本: Oracle D…
阅读更多...
用 Java 实现爬虫 (爬取本地html中的人物信息并可视化人物关系)

用 Java 实现爬虫 (爬取本地html中的人物信息并可视化人物关系)

目录 爬虫简介 常用的工具框架 selenium Jsoup Jsoup介绍 Jsoup的主要功能如下&#xff1a; HTML 相关知识 通过Jsoup元素获取 案例 爬取本地html中的角色信息 HtmlParseUtil 可以利用relation-graph 将人物关系可视化 使用爬虫要注意 查看网站的爬虫协议 爬虫简介…
阅读更多...
面试：ANR原因及排查

面试：ANR原因及排查

ANR原因 1、CPU满负荷&#xff0c;I/O阻塞 2、内存不足&#xff0c;系统分配给一个应用的内存是有上限的&#xff0c;长期处于内存紧张&#xff0c;会导致频繁内存交换&#xff0c;进而导致应用的一些操作超时。自己内存泄漏或者其他应用占用的大量内存 3、四大组件ANR 4、…
阅读更多...
字符串压缩（一）之ZSTD

字符串压缩（一）之ZSTD

一、zstd压缩与解压 ZSTD_compress属于ZSTD的Simple API范畴&#xff0c;只有压缩级别可以设置。 ZSTD_compress函数原型如下&#xff1a; size_t ZSTD_compress(void* dst, size_t dstCapacity, const void* src, size_t srcSize, int compressionLevel) ZSTD_decompress函数原…
阅读更多...
Mysql replace into

Mysql replace into

CREATE TABLE t (id int(11) NOT NULL AUTO_INCREMENT,age int(11) DEFAULT NULL,msg varchar(10) DEFAULT NULL,PRIMARY KEY (id),UNIQUE KEY uniq_age (age) ) ENGINEInnoDB DEFAULT CHARSETutf8;insert into t (age, msg) values (1,aaa),(2,bbb),(3,ccc);id 为自增主键、ag…
阅读更多...
「重学JS」你真的懂数据类型吗?

「重学JS」你真的懂数据类型吗?

前言 学习了这么久前端&#xff0c;发现自己对于基础知识的掌握并没有那么通透&#xff0c;于是打算重新学一遍JS&#xff0c;引用经济学的一句话&#xff1a;JS基础决定能力高度&#x1f926;&#x1f3fb; 基础很重要&#xff0c;只有基础好才会很少出 bug&#xff0c;大多数…
阅读更多...
aws cloudformation 理解常见资源的部署和使用

aws cloudformation 理解常见资源的部署和使用

参考 cfn101-workshopaws cli cloudformation cloudformation是aws的iac工具&#xff0c;以下简称cfn 环境搭建——cfn命令行工具 创建堆栈 aws cloudformation create-stack --stack-name testtemp \--template-body file://testtemp.yaml# --parameters ParameterKeyKey…
阅读更多...
二叉树的循环问题

二叉树的循环问题

目录 一、二叉树的完全性检验 二、前序遍历的非递归写法 三、中序遍历的非递归写法 四、后序遍历的非递归写法 一、二叉树的完全性检验 给定一个二叉树的 root &#xff0c;确定它是否是一个 完全二叉树 。 在一个 完全二叉树 中&#xff0c;除了最后一个关卡外&#xff0c…
阅读更多...
Vue脚手架

Vue脚手架

脚手架 安装步骤 全局安装vue/cli npm install -g vue/cli 安装之后使用不了vue的命令&#xff0c;查看nodejs文件发现我把vue装在了node_globalnpm这个文件夹中。 解决方法&#xff1a;新增一条path指向该文件夹 切换到你要创建的目录创建脚手架 vue create 项目名称 根据…
阅读更多...
[附源码]Python计算机毕业设计Django保护濒危动物公益网站

[附源码]Python计算机毕业设计Django保护濒危动物公益网站

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
【Hack The Box】linux练习-- Talkative

【Hack The Box】linux练习-- Talkative

HTB 学习笔记 【Hack The Box】linux练习-- Talkative &#x1f525;系列专栏&#xff1a;Hack The Box &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4c6;首发时间&#xff1a;&#x1f334;2022年11月27日&#x1f334; &#x…
阅读更多...
初始数据结构

初始数据结构

目录 1. 集合的框架 集合框架的重要性 数据结构的介绍 算法的介绍 容器背后对应的数据结构 2. 时间复杂度和空间复杂度 算法效率 时间复杂度 时间复杂度的概念 大O的渐进表示法 常见的时间复杂度的计算 空间复杂度 空间复杂度的概念 从本章开始又要开始新的篇章&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023