css 实现满屏升空的气球动画
最终实现效果
demo放在最后了。。。。
问题一
怎么实现满屏气球?简单理解就是多个气球的合并,难道要写多个盒子吗?确实是这样子,但可以有更好的办法,其实就是通过原生操作多个盒子生成,所以只需要实现一个颜色、大小、位置可自定义的气球即可。
问题二
如何实现一个气球?
从图上我们可以找出四个点:红气球
、红气球上的白椭圆
、捆绑气球
、气球棒
、气球口
。我们真正渲染就两个盒子,
设置气球:包括气球、气球捆绑、气球棒,通过两个盒子实现,借助伪元素:before、:after在元素前后添加相关样式实现。
实现步骤
step1 定义气球的样式,并在气球上添加白色椭圆形。
step2 定义气球棒和气球口。
step3 设置气球动画:实现气球从下到上匀速移动就可以升空了。
step4 设置气球颜色、大小、位置变量。
step5 生成多个气球盒子,将变量传入。
涉及的知识点
1、border-radius
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性 ,分别是以下组成: 左上圆角半径:border-top-left-radius
, 右上圆角半径:border-top-right-radius
, 右下圆角半径:border-bottom-right-radius
, 左下圆角半径:border-bottom-left-radius
形式定义
初始值 | as each of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0 |
属性值个数为 1 ;
border-radius: 40px;
它表示该元素的四个方向的圆角大小都是一样的。
属性值个数为 2 ;
border-radius: 40px 10px;
第一个值表示左上角和右下角(对角),第二个值表示右上角和左下角(对角)
属性值个数为 3 ;
border-radius: 40px 20px 10px;
第一个值表示左上角,第二个值表示右上角和左下角(对角),第三个值表示右下角
属性值个数为 4 ;
border-radius: 40px 30px 20px 10px;
分别代表:左上角、右上角、右下角、左下角(顺时针方向)
在上述用法中,每个圆角的“水平半径”与“垂直半径”都是相同的,当然也可以分别设置。
完整形式语法
border-radius = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]? <length-percentage> = <length> | <percentage>
border-radius属性带了/符号,第一组值表示“水平半径”,第二组值表示“垂直半径”,每组值同时可以设置 1 个到 4 个值,规则与之前相同。
通过画一个🥚来帮助更好的理解把!
border-radius: 75px 75px 75px 75px/125px 125px 75px 75px;
异形图快捷生成https://9elements.github.io/fancy-border-radius/#50.100.40.32--.
2、calc函数
calc() 函数用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;
自动调整表单域的大小以适应其容器的大小
calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘。
3、vmin、vmax
(1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
(2)具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
(3)vmin、vmax 用处
做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是一样的。
4、Hsla函数
定义与用法
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即色调、饱和度、亮度、透明度(英语:Hue, Saturation, Lightness, Alpha )。
(1)色调:hue
亮度的单位可以是度、弧度、梯度或者转角,如果传参时不带单位,则默认为度。根据色轮(也叫色盘、色彩三原色的色环)定义,红色为0度,其他的颜色均匀分布在圆的周围,比如:绿色是120度、蓝色是240度等等。
有时,我们可以使用负的角度值来定义色调,因为圆的角度的周期性,因此,-120度=-120+360=240度。
如果使用大于360度的色调参数,则等同于其减去N个360度得出的小于360度的角度值,如480度=480-360=120度。
(2)饱和度:saturation
饱和度的范围为0%-100%,0%代表完全不饱和,100%代表完全饱和。
(3)亮度:lightness
亮度值的取值范围为0%-100%,亮度为0%代表黑色,亮度为50%时代表正常,100%时为白色。
(4)透明度: 可选参数alpha
透明度的取值范围为0-1,可以是用小数形式也可使用百分比形式,1对应100%代表完全不透明,0对应0%代表完全透明。
⚠️需要注意的是:饱和度和亮度不同于透明度可用小数表示,饱和度和亮度参数必须使用百分比形式,如不可用0.5表示50%,虽然他们在数值上是相等的。
hsl()函数和hsla()函数的使用
hsl()函数经常和conic-gradient()函数一起使用,因为两者都是处理角度。如我们使用CSS制作一个色相环效果,代码如下:
.box {width: 200px;height: 200px;background: conic-gradient(hsl(0, 100%, 50%), hsl(45, 100%, 50%), hsl(90, 100%, 50%), hsl(135, 100%, 50%), hsl(180, 100%, 50%), hsl(225, 100%, 50%), hsl(270, 100%, 50%), hsl(315, 100%, 50%), hsl(360, 100%, 50%));clip-path: circle(closest-side);
}
效果如下:
5、css全局变量和局部变量
(1)设置全局变量
CSS全局变量的声明是在变量名称前加两个中横线--。
body {--Color: #2C51CD;--BackGround: #B4D4FD;
}:root {--Color: #2C51CD;--BackGround: #B4D4FD;
}
💡上述代码中,body选择器中声明了Color和BackGround两个变量。而使用--是因为$被Sass占用了,@被Less占用了。
⚠️变量的声明对大小写敏感。如:Color和color表示两个不同的变量。
(2)设置局部变量
其实设置局部变量和全局变量的方式大致一致,具体操作如下:
a.如果我们需要在一个id为box的容器内声明一个局部变量,让其在整个box容器内都是可调用的,我们可以如下操作:
#box{ --cssname : value;
}//此变量的作用域仅限于在#box容器的任何子元素,调用方法如下:#box .child{ color : var(--cssname)
}
b.局部变量定义在元素标签的行内式 style
中,表示只作用于当前元素标签。
<div class="text" style="--font-size:20px">var 函数</div>
6、var函数
(1)读取变量,使用var()函数来读取变量。
p { background: var(--Color);
}
(2)var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
p { background: var(--Color, #2C51CD);
}
(3)第二个参数不处理内部的逗号或空格,都视作参数的一部分。
p {font-family: var(--fontF, "Roboto", "Helvetica");margin: var(--Margins, 15px 20px 25px);
}
(4)var()函数还可以用在变量声明中
body { --Color: #2C51CD; --BackGround: var(--Color);
}
(5)变量只能作为属性值,不能作为属性名
(6)变量值的类型
a.如果变量值是字符串,则可以与其他字符串拼接
:root { --Hi: 'hello';--Name: var(--Hi)',world';
}
b.如果是数值,则不可以拼接
:root { --pSizeVal: 20; --pSize: var(--pSizeVal)'px'; //无效
}
但可以通过calc()函数,将他们拼接起来
:root {--pSizeVal: 20; --pSize: calc(var(--pSizeVal)*1px);
}
c.如果变量值带单位,则不能写成字符串形式
:root { --pSize: '20px'; margin-top: var(--pSize); //无效
}
:root { --pSize: 20px; margin-top: var(--pSize); //有效
}
代码地址
https://github.com/14130110048/balloon
相关文章:
![](https://img-blog.csdnimg.cn/direct/8ae2389851784586935c810ac8ff9eb1.png)
css 实现满屏升空的气球动画
最终实现效果 demo放在最后了。。。。 问题一 怎么实现满屏气球?简单理解就是多个气球的合并,难道要写多个盒子吗?确实是这样子,但可以有更好的办法,其实就是通过原生操作多个盒子生成,所以只需要实现一个…...
![](https://img-blog.csdnimg.cn/direct/f0c5f6d90ebd4146814f81a93680507e.png)
批量归一化
目录 一、BN层介绍 1、深层神经网络存在的问题 2、批量归一化公式的数学推导 3、BN层的作用位置 4、 预测过程中的批量归一化 5、BN层加速模型训练的原因 6、总结 二、批量归一化从零实现 1、实现批量归一化操作 2、创建BN层 3、对LeNet加入批量归一化 4、开始训练…...
![](https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8)
C语言:字符串字面量及其保存位置
相关阅读 C语言https://blog.csdn.net/weixin_45791458/category_12423166.html?spm1001.2014.3001.5482 虽然C语言中不存在字符串类型,但依然可以通过数组或指针的方式保存字符串,但字符串字面量却没有想象的这么简单,本文就将对此进行讨论…...
![](https://img-blog.csdnimg.cn/3a01dc60e62c415b812015851343f1c0.png#pic_center)
【开源】基于Vue+SpringBoot的新能源电池回收系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计 四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…...
![](https://img-blog.csdnimg.cn/direct/7500df37142b43ff9fa7ac8a810977dc.png)
共享和独享的区别是什么?有必要用独享IP吗?
通俗地讲,共享IP就像乘坐公共汽车一样,您可以到达目的地,但将与其他乘客共享旅程,座位很可能是没有的。独享IP就像坐出租车一样,您可以更快到达目的地,由于车上只有您一个人,座位是您一个人专用…...
![](https://img-blog.csdnimg.cn/direct/e3fdd3c9d7c948b586c3bde03a4e640d.png)
leetcode——打家劫舍问题汇总
本章汇总一下leetcode中的打家劫舍问题,使用经典动态规划算法求解。 1、梦开始的地方——打家劫舍(★) 本题关键点就是不能在相邻房屋偷东西。 采用常规动态规划做法: 根据题意设定dp数组,dp[i]的含义为:…...
![](https://img-blog.csdnimg.cn/direct/54d431916e824d1a84d62b612ed6b1fb.png)
Java经典框架之Spring MVC
Spring MVC Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机,Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. Spring MVC 入门案例 2. 基…...
![](https://www.ngui.cc/images/no-images.jpg)
Golang make vs new
文章目录 1.简介2.区别3.new 可以初始化 slice,map 和 channel 吗?4.make 可以初始化其他类型吗?5.小结参考文献 1.简介 在 Go 语言中,make 和 new 是两个用于创建对象的内建函数,但它们有着不同的用途和适用范围。 …...
![](https://img-blog.csdnimg.cn/direct/8e352a689fd2432c836307e073ecfe47.png)
Arthas
概述 Arthas(阿尔萨斯) 能为你做什么? Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱。 当你遇到以下类似问题而束手无策时,Arthas可以帮助你解决: 这个类从哪个 jar 包加载的?为什么会…...
![](https://img-blog.csdnimg.cn/img_convert/d2c7307aa884d2c20604baf384ac904c.jpeg)
IP代理科普| 共享IP还是独享IP?两者的区别与优势
通俗地讲,共享IP就像乘坐公共汽车一样,您可以到达目的地,但将与其他乘客共享旅程,座位很可能是没有的。独享IP就像坐出租车一样,您可以更快到达目的地,由于车上只有您一个人,座位是您一个人专用…...
![](https://img-blog.csdnimg.cn/direct/00a4fbf655054db1a32ab9d54b893799.png)
龙芯loongarch64服务器编译安装tensorflow-io-gcs-filesystem
前言 安装TensorFlow的时候,会出现有些包找不到的情况,直接使用pip命令也无法安装,比如tensorflow-io-gcs-filesystem,安装的时候就会报错: 这个包需要自行编译,官方介绍有限,这里我讲解下 编译 准备 拉取源码:https://github.com/tensorflow/io.git 文章中…...
![](https://img-blog.csdnimg.cn/img_convert/2c695934cc65d368ce1548bad07c5cad.png)
开源持续测试平台Linux MeterSphere本地部署与远程访问
文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…...
![](https://img-blog.csdnimg.cn/direct/5e8de6080ce046dfb22d970db19bfdac.png)
Kubernetes(K8S)快速入门
概述 在本门课程中,我们将会学习K8S一些非常重要和核心概念,已经操作这些核心概念对应组件的相关命令和方式。比如Deploy部署,Pod容器,调度器,Service服务,Node集群节点,Helm包管理器等等。 在…...
![](https://img-blog.csdnimg.cn/img_convert/d777c7979542571cbf0930ac79435780.png)
将遗留系统分解为微服务:第 2 部分
在当今不断发展的技术环境中,从整体架构向微服务的转变对于许多企业来说都是一项战略举措。这在报销计算系统领域尤其重要。正如我在上一篇文章第 1 部分应用 Strangler 模式将遗留系统分解为微服务-CSDN博客中提到的,让我们探讨如何有效管理这种转变。 …...
![](https://img-blog.csdnimg.cn/f5d9ea1eaf0b46b99818aa9471b2ee10.jpeg)
RK3588平台开发系列讲解(AI 篇)RKNN-Toolkit2 模型的加载转换
文章目录 一、Caffe 模型加载接口二、TensorFlow 模型加载接口三、TensorFlowLite 模型加载接口四、ONNX 模型加载五、DarkNet 模型加载接口六、PyTorch 模型加载接口沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 RKNN-Toolkit2 目前支持 Caffe、TensorFlow、Tensor…...
![](https://img-blog.csdnimg.cn/direct/43d3773fd47b453589bbce8fa42ad199.png)
CNVD原创漏洞审核和处理流程
一、CNVD原创漏洞审核归档和发布主流程 (一)审核和归档流程 审核流程分为一级、二级、三级审核,其中一级审核主要对提交的漏洞信息完整性进行审核,漏洞符合可验证(通用型漏洞有验证代码信息或多个互联网实例、事件型…...
![](https://img-blog.csdnimg.cn/direct/bfcb9659f33a4363b2ffd22e13aaba6a.png)
【java爬虫】基于springboot+jdbcTemplate+sqlite+OkHttp获取个股的详细数据
注:本文所用技术栈为:springbootjdbcTemplatesqliteOkHttp 前面的文章我们获取过沪深300指数的成分股所属行业以及权重数据,本文我们来获取个股的详细数据。 我们的数据源是某狐财经,接口的详细信息在下面的文章中,本…...
![](https://img-blog.csdnimg.cn/direct/86716853fdda4d5990a1183b6468fd2b.png#pic_center)
智能优化算法应用:基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码
智能优化算法应用:基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工兔算法4.实验参数设定5.算法结果6.参考文…...
![](https://img-blog.csdnimg.cn/direct/23604469771d441daa83cd864e6d67c5.png)
【ubuntu 22.04】安装vscode并配置正常访问应用商店
注意:要去vscode官网下载deb安装包,在软件商店下载的版本不支持输入中文 在ubuntu下用火狐浏览器无法访问vscode官网,此时可以手动进行DNS解析,打开DNS在线查询工具,解析以下主机地址(复制最后一个IP地址&a…...
![](https://img-blog.csdnimg.cn/direct/c41dc121bf364201976731c5eba454cc.png#pic_center)
K8s出现问题时,如何排查解决!
K8s问题的排查 1. POD启动异常、部分节点无法启动pod2. 审视集群状态3. 追踪事件日志4. 聚焦Pod状态5. 检查网络连通性6. 审视存储配置7. 研究容器日志8. K8S集群网络通信9. 问题:Service 是否通过 DNS 工作?10. 总结1、POD启动异常、部分节点无法启动p…...
![](https://img-blog.csdnimg.cn/direct/784707abd9ae4607b144098f900a062a.png)
2015年第四届数学建模国际赛小美赛B题南极洲的平均温度解题全过程文档及程序
2015年第四届数学建模国际赛小美赛 B题 南极洲的平均温度 原题再现: 地表平均温度是反映气候变化和全球变暖的重要指标。然而,在以前的估计中,在如何界定土地平均数方面存在一些方法上的差异。为简单起见,我们只考虑南极洲。请建…...
![](https://www.ngui.cc/images/no-images.jpg)
npm常见错误
三个方面 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! phantomjs-prebuilt2.1.15 install: node install.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the phantomjs-prebuilt2.1.15 install script. np…...
![](https://img-blog.csdnimg.cn/direct/53c15eb7db7842c7bf616aa736c43379.png#pic_center)
JVM入门到入土-Java虚拟机寄存器指令集与栈指令集
JVM入门到入土-Java虚拟机寄存器指令集与栈指令集 HotSpot虚拟机中的任何操作都需要入栈和出栈的步骤。 由于跨平台性的设计,Java的指令都是根据栈来设计的。不同平台CPU架构不同,所以不能设计为基于寄存器的。优点是跨平台,指令集小&#x…...
![](https://img-blog.csdnimg.cn/direct/5ddfef03ccf147feba6798121b4fa393.png)
MS2244模拟开关可Pin to Pin兼容NJM2244
MS2244 是一款集成的视频开关,实现三输入视频或音频信号的三选一。可Pin to Pin兼容NJM2244。 芯片集成了 75Ω驱动电路,可以直接驱动电视监控器。芯片工作电压 5V~12V,带宽 10MHz,抗串扰 70dB (4.43MHz)。另外芯片还集…...
![](https://img-blog.csdnimg.cn/img_convert/fdab4e1bd56277b20da73b63d9852072.png)
PostgreSQL 可观测性最佳实践
简介 软件简述 PostgreSQL 是一种开源的关系型数据库管理系统 (RDBMS),它提供了许多可观测性选项,以确保数据库的稳定性和可靠性。 可观测性 可观测性(Observability)是指对数据库状态和操作进行监控和记录,以便在…...
![](https://img-blog.csdnimg.cn/direct/5ec6a4cd2abb4684aae30ca1854b9186.png)
51单片机相关寄存器
前言 单片机复习的时候对应寄存器的记忆感觉很混乱,这里进行一下整理,后面的单词是我用来辅助记忆的,可能并不是表示原本的含义。 P3口的第二功能 0RXD 串行数据输入口 1TXD串行数据输出口2INT0外部中断0输入3INT1外部中断1输入4T0定时器0外部计数输入…...
![](https://img-blog.csdnimg.cn/direct/62219b9ff03e4ffd9277fbac3d72a871.png)
二叉树进阶题目(超详解)
文章目录 前言根据二叉树创建字符串题目分析写代码 二叉树的层序遍历题目分析 写代码二叉树的层序遍历II题目分析写代码 二叉树的最近公共祖先题目分析写代码时间复杂度 优化思路优化的代码 二叉搜索树与双向链表题目分析写代码 从前序与中序遍历序列构造二叉树题目分析写代码从…...
![](https://img-blog.csdnimg.cn/direct/3680e44888f74049819cb3f4d287855d.png)
W6100-EVB-Pico评估版介绍
文章目录 1 简介2 硬件资源2.1 硬件规格2.2 引脚定义2.3 工作条件 3 参考资料3.1 Datasheet3.2 原理图3.3 尺寸图(尺寸:mm)3.4 参考例程 4 硬件协议栈优势 1 简介 W6100-EVB-Pico是一款基于树莓派RP2040和全硬件TCP/IP协议栈以太网芯片W6100的…...
![](https://img-blog.csdnimg.cn/direct/42d54b3ce915411bb9a9155d685fb7f3.png)
嵌入式面试准备
题目都摘于网上 嵌入式系统中经常要用到无限循环,如何用C编写死循环 while(1){}或者for(;😉 内存分区 代码区,全局区(全局变量,静态变量,以及常量),栈区,堆区 const关键…...
![](https://img-blog.csdnimg.cn/9d40fce6b10e46c7a6778b5d59bc6fed.gif#pic_center)
在Linux Docker中部署RStudio Server,实现高效远程访问
🌈个人主页:聆风吟 🔥系列专栏:网络奇遇记、Cpolar杂谈 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. 安装RStudio Server二. 本地访问三. Linux 安装cpolar四. 配置RStudio serv…...
![](https://img-blog.csdnimg.cn/img_convert/e4c515603af6aaf9aaa8843d7878e4c1.png)
EternalBlue【永恒之蓝】漏洞详解(复现、演示、远程、后门、入侵、防御)内容丰富-深入剖析漏洞原理-漏洞成因-以及报错解决方法-值得收藏!
漏洞背景: 1.何为永恒之蓝? 永恒之蓝(Eternal Blue)爆发于2017年4月14日晚,是一种利用Windows系统的SMB协议漏洞来获取系统的最高权限,以此来控制被入侵的计算机。甚至于2017年5月12日, 不法分子…...
![](https://img-blog.csdnimg.cn/direct/dec848b0e8a04fc6834ca64000cb81a7.png)
长链接与在线文件
什么是在线文件 常见的聊天工具,比如。。。微信,你可以发送一个文件给对端,即使对端不在线,这个文件也可以暂存在服务器上面,直到接收端上线消费或者超时,这个叫离线文件。与之对应的,在线文件要…...
![](https://www.ngui.cc/images/no-images.jpg)
Python内置数据类型等入门语(句)法
内置数据类型 数字(Number)关键字: int 、float、complex字符串(String)关键字:单引号,双引号 三引号都可以表示,8 种内置类型都可转为字符串类型列表(List) 关键符号 […...
![](https://img-blog.csdnimg.cn/direct/8a19fb5d280f4316bd151594efd9b419.png)
ElasticSearch之RestClient笔记
1. ElasticSearch 1.1 倒排索引 1.2 ElasticSearch和Mysql对比 1.3 RestClient操作 导入依赖 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><version>7.15.…...
![](https://img-blog.csdnimg.cn/direct/c5363dc9e15543b68babb169d73eb4b4.png)
饥荒Mod 开发(二二):显示物品信息
饥荒Mod 开发(二一):超大便携背包,超大物品栏,永久保鲜 饥荒Mod 开发(二三):显示物品栏详细信息 饥荒中的物品没有详细信息,基本上只有一个名字,所以很多物品的功能都不知道,比如浆果吃了也不知…...
![](https://www.ngui.cc/images/no-images.jpg)
Microsoft Edge使用方法和心得
Microsoft Edge使用方法和心得 大家好,我是豪哥,一名来自杭州的Java程序员,今天我想分享一下我对Microsoft Edge的使用方法和心得。作为一名热爱编程的程序员,我发现一个高效的浏览器对于我们的工作和学习至关重要。而Microsoft …...
![](https://www.ngui.cc/images/no-images.jpg)
Kafka操作指令笔记
查堆积用命令查: ./kafka-consumer-groups.sh --bootstrap-server {kafka集群地址} --describe --group {消费组名称}bin/kafka-consumer-groups.sh --bootstrap-server localhost:9092 --describe --all-groups #查看所有组别的积压情况可以通过grep、awk或其他文…...
![](https://img-blog.csdnimg.cn/direct/fbe9cbbdb1c34b1ab5d23b319f3845ec.png)
WAVE SUMMIT+ 2023倒计时2天,传文心一言将曝最新进展!
传文心一言将曝最新进展! 亮点一:趋势引领,“扛把子”文心一言将曝新进展亮点二:干货十足,硬核低门槛开发秘籍大放送亮点三:蓄势待发,大模型赋能产业正当时亮点四:群星闪耀ÿ…...
![](https://www.ngui.cc/images/no-images.jpg)
Crow:Middlewares 庖丁解牛5 context
Crow:Middlewares 庖丁解牛4 partial_context-CSDN博客 基于partial_context再来解释context namespace detail {template<typename... Middlewares>struct partial_context : public pop_back<Middlewares...>::template rebind<partial_context>, public…...
![](https://img-blog.csdnimg.cn/direct/0ba1c4dc57744aeeafc6808dd4bcd71a.png)
CentOS 7 设置网络
CentOS 7 设置网络 正常情况 ①登陆进去之后使用下面的命令修改文件 echo ONBOOTyes >> /etc/sysconfig/network-scripts/ifcfg-ens33②如果是虚拟机重启后使用如下命令进行查看IP地址 ip addr注:到这里如果显示有两部分,则代表网络设置成功&a…...
![](https://www.ngui.cc/images/no-images.jpg)
装饰器模式(Decorator)
装饰器模式(Decorator Pattern)是一种结构型设计模式,用于动态地给一个对象添加额外的职责。装饰器提供了一个灵活的替代扩展功能的方案,相比继承更加灵活。 在Java中,装饰器模式通常涉及以下几个部分: 组件(Component):定义一个对象接口,可以给这些对象动态添加职责…...
![](https://img-blog.csdnimg.cn/direct/b8ff72fca43f412b9d6b89dd3e88bc01.png)
关于“Python”的核心知识点整理大全34
目录 第13 章 外星人 13.1 回顾项目 game_functions.py 13.2 创建第一个外星人 13.2.1 创建 Alien 类 alien.py 13.2.2 创建 Alien 实例 alien_invasion.py 13.2.3 让外星人出现在屏幕上 game_functions.py 13.3 创建一群外星人 13.3.1 确定一行可容纳…...
![](https://img-blog.csdnimg.cn/direct/cf5512667e8c48579e8f6dec1a0a606b.png)
设计模式--抽象工厂模式
实验4:抽象工厂模式 本次实验属于模仿型实验,通过本次实验学生将掌握以下内容: 1、理解抽象工厂模式的动机,掌握该模式的结构; 2、能够利用抽象工厂模式解决实际问题。 [实验任务]:人与肤色 使用抽象…...
![](https://img-blog.csdnimg.cn/direct/5c49127e1d1647c7aad2f74f7e9a8a9b.png)
浅析海博深造
文章目录 深造作用 留学种类 选专业 择校 申请流程 申请方式 深造作用 1、个人能力提升(学术专业、语言、新文化或新生活方式) 2、更好的职业发展(起点更高、结交新朋友或扩大社交圈) 3、北京上海落户优惠 4、海外居留福…...
![](https://img-blog.csdnimg.cn/direct/c0bb6642e7c3440e8338afa05e5f1bc2.png)
【Hive_05】企业调优1(资源配置、explain、join优化)
1、 计算资源配置1.1 Yarn资源配置1.2 MapReduce资源配置 2、 Explain查看执行计划(重点)2.1 Explain执行计划概述2.2 基本语法2.3 案例实操 3、分组聚合优化3.1 优化说明(1)map-side 聚合相关的参数 3.2 优化案例 4、join优化4.1…...
![](https://img-blog.csdnimg.cn/direct/256064a179e6425e9f8d34daccf46229.png)
synchronized
⭐ 作者:小胡_不糊涂 🌱 作者主页:小胡_不糊涂的个人主页 📀 收录专栏:JavaEE 💖 持续更文,关注博主少走弯路,谢谢大家支持 💖 synchronized 1. 特性1.1 互斥1.2 可重入 …...
![](https://img-blog.csdnimg.cn/3ab942d013b04045b263aa9ce110c751.png)
Vue在页面上添加水印
第一步:在自己的项目里创建一个js文件;如图所示我在在watermark文件中创建了一个名为waterMark.js文件。 waterMark.js /** 水印添加方法 */ let setWatermark (str1, str2) > {let id 1.23452384164.123412415if (document.getElementById(id) …...
![](https://img-blog.csdnimg.cn/direct/83078530845449e281372b0598fd259f.png)
SQL server 数据库练习题及答案(练习2)
使用你的名字创建一个数据库 创建表: 数据库中有三张表,分别为student,course,SC(即学生表,课程表,选课表) 问题: --1.分别查询学生表和学生修课表中的全部数据。--2.查询成绩在70到80分之间…...
![](https://www.ngui.cc/images/no-images.jpg)
minicube搭建golang容器服务
引言 最近在自己电脑上搭建一个小型k8s环境,以学习云原生相关内容。这里我主要分为三部分记录: 容器及容器编排理论环境安装相关rpcx服务实战 还在调试中,先总结整理下,这里后续补充上我的github工程链接。 一、容器及容器编排理…...
![](https://img-blog.csdnimg.cn/direct/34dc5b16d52245409a4be8af17d0c6b5.png)
图片批量处理:图片批量缩放,高效调整尺寸的技巧
在数字媒体时代,图片处理已是日常生活和工作中不可或缺的一部分。有时候要批量处理图片,如缩放图片尺寸,以满足不同的应用需求。现在一起来看看办公提效式具如何高效的将图片批量处理方法,快速、准确地批量调整图片尺寸操作。 下…...