【圣诞节限定】今天教你如何用Html+JS+CSS绘制3D动画圣诞树

news2024/11/18 13:56:16

一、前言

应CSDN的邀请，这次给大家展示一波，如何用H5技术绘制3D圣诞树。

二、创意名

只采用简单的Html+JS+CSS 技术绘制。

三、效果展示

圣诞树修过如下：
在这里插入图片描述

四、编码实现

将源码复制保存到html中打开即可。

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>圣诞树</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	:root {
		--main-bg: #c2c2c2;
		--trunk-bg-1: #5e2100;
		--trunk-bg-2: #783e00;
		--leaves-bottom-bg-1: #227700;
		--leaves-bottom-bg-2: #3fc83f;
		--leaves-middle-bg-1: #108A40;
		--leaves-middle-bg-2: #39E97F;
		--leaves-top-bg-1: #44AA00;
		--leaves-top-bg-2: #41FF11;
		--star-bg: #FFFF44;
		--shine-bg: #ffeb69;
		--snow-bg: #f2f2f2;
		--tree-width: 200px;
		--tree-height: 400px;
		--tree-rotate: -15deg;
		--trunk-width: 30px;
		--trunk-height: 400px;
		--trunk-angle: 4.3deg;
		--leaves-translate: 15px;
		--leaves-bottom-width: 100px;
		--leaves-bottom-height: 320px;
		--leaves-bottom-angle: 18.2deg;
		--leaves-middle-width: 80px;
		--leaves-middle-height: 220px;
		--leaves-middle-angle: 21.4deg;
		--leaves-top-width: 60px;
		--leaves-top-height: 140px;
		--leaves-top-angle: 25.5deg;
		--star-size: 20px;
	}

	html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		overflow:hidden;
	}

	.ts-3d {
		transform-style: preserve-3d;
	}

	.container {
		background-color: var(--main-bg);
		width: 100%;
		min-height: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tree {
		width: var(--tree-width);
		height: var(--tree-height);
		position: relative;
		transform-style: preserve-3d;
		transform: rotateX(var(--tree-rotate));
	}

	.trunk,
	.leaves-bottom,
	.leaves-middle,
	.leaves-top {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		animation: 10s tree-rotate linear infinite;
	}

	.trunk div {
		border-top: none;
		border-left: solid var(--trunk-width) transparent;
		border-right: solid var(--trunk-width) transparent;
		position: absolute;
		bottom: 0;
		left: calc(50% - var(--trunk-width));
		transform-origin: bottom;
	}

	.trunk div:nth-child(1) {
		border-bottom: solid var(--trunk-height) var(--trunk-bg-1);
		transform: rotateX(var(--trunk-angle)) translateY(2px) translateZ(var(--trunk-width));
	}

	.trunk div:nth-child(2) {
		border-bottom: solid var(--trunk-height) var(--trunk-bg-2);
		transform: rotateY(90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
	}

	.trunk div:nth-child(3) {
		border-bottom: solid var(--trunk-height) var(--trunk-bg-1);
		transform: rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
	}

	.trunk div:nth-child(4) {
		border-bottom: solid var(--trunk-height) var(--trunk-bg-2);
		transform: rotateY(-90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
	}

	.leaves-bottom div {
		border-top: none;
		border-left: solid var(--leaves-bottom-width) transparent;
		border-right: solid var(--leaves-bottom-width) transparent;
		position: absolute;
		top: var(--star-size);
		left: calc(50% - var(--leaves-bottom-width));
		transform-origin: bottom;
	}

	.leaves-bottom div:nth-child(1) {
		border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);
		transform: rotateX(var(--leaves-bottom-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-bottom-width));
	}

	.leaves-bottom div:nth-child(2) {
		border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);
		transform: rotateY(90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
	}

	.leaves-bottom div:nth-child(3) {
		border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);
		transform: rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
	}

	.leaves-bottom div:nth-child(4) {
		border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);
		transform: rotateY(-90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
	}

	.leaves-middle div {
		border-top: none;
		border-left: solid var(--leaves-middle-width) transparent;
		border-right: solid var(--leaves-middle-width) transparent;
		position: absolute;
		top: var(--star-size);
		left: calc(50% - var(--leaves-middle-width));
		transform-origin: bottom;
	}

	.leaves-middle div:nth-child(1) {
		border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);
		transform: rotateX(var(--leaves-middle-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-middle-width));
	}

	.leaves-middle div:nth-child(2) {
		border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);
		transform: rotateY(90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
	}

	.leaves-middle div:nth-child(3) {
		border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);
		transform: rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
	}

	.leaves-middle div:nth-child(4) {
		border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);
		transform: rotateY(-90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
	}

	.leaves-top div {
		border-top: none;
		border-left: solid var(--leaves-top-width) transparent;
		border-right: solid var(--leaves-top-width) transparent;
		position: absolute;
		top: var(--star-size);
		left: calc(50% - var(--leaves-top-width));
		transform-origin: bottom;
	}

	.leaves-top div:nth-child(1) {
		border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);
		transform: rotateX(var(--leaves-top-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-top-width));
	}

	.leaves-top div:nth-child(2) {
		border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);
		transform: rotateY(90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
	}

	.leaves-top div:nth-child(3) {
		border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);
		transform: rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
	}

	.leaves-top div:nth-child(4) {
		border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);
		transform: rotateY(-90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
	}

	@keyframes tree-rotate {
		0%        { transform: rotateX(0deg) rotateY(0deg); }
		99.99999% { transform: rotateX(0deg) rotateY(359deg); }
	}

	.shadow {
		background-color: rgba(0, 0, 0, 0.8);
		width: calc(var(--leaves-bottom-width) * 2);
		height: calc(var(--leaves-bottom-width) * 2);
		filter: blur(calc(var(--leaves-bottom-width) / 2));
		position: absolute;
		bottom: calc(var(--leaves-bottom-width) * -1);
		left: calc(50% - var(--leaves-bottom-width));
		transform: rotateX(90deg) translateX(-50%);
		animation: 10s shadow-rotate linear infinite;
	}

	@keyframes shadow-rotate {
		0%        { transform: rotateX(-90deg) rotateZ(0deg); }
		99.99999% { transform: rotateX(-90deg) rotateZ(359deg); }
	}

	.star-1 {
		transform: translateZ(-2px);
		animation: 10s star-1-rotate linear infinite;
	}

	@keyframes star-1-rotate {
		0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(-2px); }
		99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(-2px); }
	}

	.star-2 {
		transform: translateZ(-1px);
		animation: 10s star-2-rotate linear infinite;
	}

	@keyframes star-2-rotate {
		0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(-1px); }
		99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(-1px); }
	}

	.star-3 {
		transform: translateZ(0px);
		animation: 10s star-3-rotate linear infinite;
	}

	@keyframes star-3-rotate {
		0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(0px); }
		99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(0px); }
	}

	.star-4 {
		transform: translateZ(1px);
		animation: 10s star-4-rotate linear infinite;
	}

	@keyframes star-4-rotate {
		0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(1px); }
		99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(1px); }
	}

	.star-5 {
		transform: translateZ(2px);
		animation: 10s star-5-rotate linear infinite;
	}

	@keyframes star-5-rotate {
		0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(2px); }
		99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(2px); }
	}

	.star,
	.star:before,
	.star:after {
		content: '';
		height: 0;
		width: 0;
		border-top: solid 30px var(--star-bg);
		border-left: solid 45px transparent;
		border-right: solid 45px transparent;
		position: absolute;
		top: 0;
		left: calc(50% - 45px);
	}

	.star:before {
		transform: rotate(72deg);
		top: -33px;
		left: -46px;
	}

	.star:after {
		transform: rotate(287deg);
		top: -33px;
		left: -44px;
	}

	.shine {
		background: var(--shine-bg);
		height: 90px;
		width: 90px;
		position: absolute;
		top: -45px;
		left: calc(50% - 45px);
		border-radius: 50%;
		transform: translateZ(40px);
		filter: blur(20px);
		opacity: 0.6;
		animation: 5s shine linear infinite;
	}

	@keyframes shine {
		0%   { transform: scale(1) translateZ(40px); }
		50%  { transform: scale(1.5) translateZ(40px); }
		100% { transform: scale(1) translateZ(40px); }
	}

	.snow-container {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.snow {
		position: absolute;
	}

	.snow:before {
		content: '';
		background-color: var(--snow-bg);
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 50%;
	}

	.snow-y-1:before {
		animation: 8s snow-y-1 ease-in infinite, 8s snow-y-0 linear infinite;
	}

	.snow-y-2:before {
		animation: 6s snow-y-2 ease-in infinite, 6s snow-y-0 linear infinite;
	}

	.snow-y-3:before {
		animation: 4s snow-y-2 ease-in infinite, 4s snow-y-0 linear infinite;
	}

	.snow-1 {
		width: 20px;
		height: 20px;
		top: calc(50% - 250px);
		left: calc(50% - 10px);
		animation: 1s snow-x linear infinite;
	}

	.snow-2 {
		width: 15px;
		height: 15px;
		top: calc(50% - 300px);
		left: calc(50% - 30px);
		animation: 0.8s snow-x linear infinite 0.1s;
	}

	.snow-3 {
		width: 10px;
		height: 10px;
		top: calc(50% - 400px);
		left: calc(50% + 60px);
		animation: 0.6s snow-x linear infinite 0.8s;
	}

	.snow-4 {
		width: 25px;
		height: 25px;
		top: calc(50% - 200px);
		left: calc(50% + 50px);
		animation: 0.5s snow-x linear infinite 0.5s;
	}

	.snow-5 {
		width: 18px;
		height: 18px;
		top: calc(50% - 200px);
		left: calc(50% - 50px);
		animation: 0.5s snow-x linear infinite 0.5s;
	}

	.snow-6 {
		width: 12px;
		height: 12px;
		top: calc(50% - 150px);
		left: calc(50% - 120px);
		animation: 0.8s snow-x linear infinite 0.5s;
	}

	.snow-7 {
		width: 20px;
		height: 20px;
		top: calc(50% - 150px);
		left: calc(50% + 75px);
		animation: 1s snow-x linear infinite 0.6s;
	}

	.snow-8 {
		width: 22px;
		height: 22px;
		top: calc(50% - 10px);
		left: calc(50% - 30px);
		animation: 1s snow-x linear infinite 0.8s;
	}

	.snow-9 {
		width: 8px;
		height: 8px;
		top: calc(50% - 250px);
		left: calc(50% - 30px);
		animation: 1s snow-x linear infinite 0.8s;
	}

	.snow-10 {
		width: 13px;
		height: 13px;
		top: calc(50% - 250px);
		left: calc(50% - 100px);
		animation: 1s snow-x linear infinite 0.8s;
	}

	@keyframes snow-x {
		0%   { transform: translateX(0px); }
		25%  { transform: translateX(5px); }
		50%  { transform: translateX(0px); }
		75%  { transform: translateX(-5px); }
		100% { transform: translateX(0px); }
	}

	@keyframes snow-y-0 {
		0%   { opacity: 1; }
		60%  { opacity: 1; }
		100% { opacity: 0; }
	}

	@keyframes snow-y-1 {
		0%        { transform: translateY(0px); }
		99.99999% { transform: translateY(300px); }
		100%      { transform: translateY(0px); }
	}

	@keyframes snow-y-2 {
		0%        { transform: translateY(0px); }
		99.99999% { transform: translateY(400px); }
		100%      { transform: translateY(0px); }
	}

	@keyframes snow-y-3 {
		0%        { transform: translateY(0px); }
		99.99999% { transform: translateY(500px); }
		100%      { transform: translateY(0px); }
	}
</style>
</head>
<body>
<div class="container">
	<div class="tree">
		<div class="shadow ts-3d"></div>
		<div class="trunk ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-bottom ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-middle ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="leaves-top ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="star star-1 ts-3d"></div>
		<div class="star star-2 ts-3d"></div>
		<div class="star star-3 ts-3d"></div>
		<div class="star star-4 ts-3d"></div>
		<div class="star star-5 ts-3d"></div>
		<div class="shine ts-3d"></div>
	</div>
	<div class="tree">
		<div class="shadow ts-3d"></div>
		<div class="trunk ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-bottom ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-middle ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="leaves-top ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="star star-1 ts-3d"></div>
		<div class="star star-2 ts-3d"></div>
		<div class="star star-3 ts-3d"></div>
		<div class="star star-4 ts-3d"></div>
		<div class="star star-5 ts-3d"></div>
		<div class="shine ts-3d"></div>
	</div>
	<div class="tree">
		<div class="shadow ts-3d"></div>
		<div class="trunk ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-bottom ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-middle ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="leaves-top ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="star star-1 ts-3d"></div>
		<div class="star star-2 ts-3d"></div>
		<div class="star star-3 ts-3d"></div>
		<div class="star star-4 ts-3d"></div>
		<div class="star star-5 ts-3d"></div>
		<div class="shine ts-3d"></div>
	</div>
	<div class="snow-container">
		<div class="snow snow-1 snow-y-1"></div>
		<div class="snow snow-2 snow-y-2"></div>
		<div class="snow snow-3 snow-y-3"></div>
		<div class="snow snow-4 snow-y-3"></div>
		<div class="snow snow-5 snow-y-2"></div>
		<div class="snow snow-6 snow-y-1"></div>
		<div class="snow snow-7 snow-y-1"></div>
		<div class="snow snow-8 snow-y-2"></div>
		<div class="snow snow-9 snow-y-3"></div>
		<div class="snow snow-10 snow-y-3"></div>
	</div>
</div>
</body>
</html>

源码都是些基本的知识，不过多讲解。

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

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

相关文章

ChatGPT与BimAnt的1小时对话实录【数字孪生】

ChatGPT与BimAnt的1小时对话实录【数字孪生】

本文为BimAnt和ChatGPT对数字孪生相关问题的解答&#xff0c;感觉这个AI真的已经“懂”了很多东西&#xff0c;让人恍惚间忘了是在和bot对话。 BimAnt&#xff1a;hello ChatGPT&#xff1a;Hello! How can I help you today? BimAnt&#xff1a;can you speak chinese&am…
阅读更多...
鲸鱼优化算法及其在无线网络资源分配中的应用（Matlab代码实现）

鲸鱼优化算法及其在无线网络资源分配中的应用（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 鲸鱼优化算法&#xff08;Whale Optimization Algorithm&#xff09;是一种新兴的智能优化算法&#xff0c;在2016年提出。算法…
阅读更多...
JWT渗透与攻防（二）

JWT渗透与攻防（二）

目录 前言 JWT漏洞演示之CTFhub&#xff08;一&#xff09; JWT漏洞演示之CTFhub&#xff08;二&#xff09; 前言 我们在之前的文章中已经讲解过了JWT漏洞相关的原理和利用&#xff0c;今天我们就通过这篇文章再来了解一下JWT的漏洞。 JWT漏洞演示之CTFhub&#xff08;一&…
阅读更多...
Linux-信号

Linux-信号

文章目录信号准备知识&#xff1a;信号产生的方式实验验证&#xff1a;9号信号是不可被捕捉&#xff08;自定义的&#xff09;信号处理&#xff1a;信号产生前&#xff1a;信号产生的方式&#xff1a;键盘实验显示&#xff1a;段错误&#xff08;野指针&#xff09;实验验证&am…
阅读更多...
SSRF ME XCTF

SSRF ME XCTF

题目 就是一个验证框和URL框&#xff0c;两个都必须有参数 解法 验证码 做一个粗略的脚本&#xff0c;一般验证码都是数字&#xff0c;所以直接开md5&#xff1a; def cmpcapt(substr):for i in range(1,100001):md5 hashlib.md5(str(i).encode(utf-8))hexmd5 md5.hexd…
阅读更多...
机器学习任务功略

机器学习任务功略

目录 机器学习的结构机器学习攻略 训练集loss较大 model bias问题optimization问题 gradient descent的问题解决 如何区分训练集loss大是model bias还是优化器的问题 测试集loss较大 overfitting过拟合 为什么会有overfitting解决过拟合的方法 训练集与测试集的不匹配 如何选择…
阅读更多...
Linux内核基础篇——常用调试技巧汇总

Linux内核基础篇——常用调试技巧汇总

文章目录printk动态输出BUG()和BUG_ON()dump_stack()devmemprintk printk共有8个等级&#xff0c;从0-7&#xff0c;等级依次降低。 打印等级可以通过修改/proc/sys/kernel/printk来改变。 查看printk等级&#xff1a; cat /proc/sys/kernel/printk 7 4 1 7打开内核所有打印…
阅读更多...
2022圣诞树（C语言摇钱树版本）

2022圣诞树（C语言摇钱树版本）

逐梦编程&#xff0c;让中华屹立世界之巅。 简单的事情重复做,重复的事情用心做,用心的事情坚持做&#xff1b; 文章目录前言一、个人感悟二、圣诞树由来三、圣诞树发展历史演变四、常见的圣诞树种类五、摇钱圣诞树效果展示六、实现思路七、编码实现总结新壁纸前言 时光飞逝&a…
阅读更多...
前端工程师必须掌握—《Webpack教程》

前端工程师必须掌握—《Webpack教程》

Webpack 学习视频地址 文章目录Webpack1.webpack基础1.1.初始化隔行变色的案例1.2.安装和配置webpack1.2.1.安装webpack1.2.2.配置webpack1.2.3.了解mode可选值的应用场景1.2.4.自定义打包的入口和出口2.插件2.1.安装和配置webpack-dev-server2.1.1.安装webpack-dev-server2.1…
阅读更多...
SpringCache+Redis的整合（微服务）

SpringCache+Redis的整合（微服务）

缓存作用&#xff1a; 举个例子&#xff1a;在我们程序中&#xff0c;很多配置数据&#xff08;例如一个商品信息、一个白名单、一个第三方客户的回调接口&#xff09;&#xff0c;这些数据存在我们的DB上&#xff0c;数据量比较少&#xff0c;但是程序访问很频繁&#xff0c;…
阅读更多...
Prometheus(十一)Grafana告警

Prometheus(十一)Grafana告警

主要概念和特点 关键概念或特征含义Data sources for Alerting 告警的数据源配置从哪里查询到告警信息数据Provisioning for Alerting 告警的配置使用文件等方式配置警报资源&#xff0c;已经管理警报资源Scheduler 调度器评估告警规则&#xff0c;将其视为定期对数据源运行查…
阅读更多...
ubuntu虚拟机修改静态ip

ubuntu虚拟机修改静态ip

我的是&#xff1a;ubuntu 20.04&#xff0c;所以 第一步 sudo vi /etc/netplan/01-network-manager-all.yaml第二步 gateway4已经弃用了&#xff0c;换成下面的&#xff1a; network:version: 2renderer: NetworkManagerethernets:ens33:addresses: [192.168.125.132/24]r…
阅读更多...
内核比较: 2.6 内核中改进了内存管理

内核比较: 2.6 内核中改进了内存管理

随着 Linux 内核的发展和成熟&#xff0c;更多的用户期待着 Linux 可以运行非常大的系统来处理科学分析应用程序或者海量数据库。这些企业级的应用程序通常需要大量的内存才能好好运行。2.4 Linux 内核有识别相当大数量的内存的功能&#xff0c;但是 2.5 内核发生了很多改变&am…
阅读更多...
docker高级篇第三章-dockerfile案例之制作自己的centos镜像

docker高级篇第三章-dockerfile案例之制作自己的centos镜像

在上一篇文章中《Dockerfile介绍及常用保留指令》，我们介绍了Dockerfile是什么以及Dockerfile常用的保留字段。熟悉了这些之后，有没有想自己动手写一个Dockerfile呢？本文咱们就实战自己Dockerfile。 案例需求： 我们以远程仓库的centos为模板，制作出代用vim\ifconfig\jav…
阅读更多...
Qt实现表格树控件-自绘树节点虚线

Qt实现表格树控件-自绘树节点虚线

一、开心一刻 一程序员第一次上女朋友家她妈板着脸问 &#xff1a;你想娶我女儿&#xff0c;有多少存款&#xff1f; 程序员低了下头&#xff1a;五百&#xff01; 她妈更鄙视了&#xff1a;才五百块&#xff0c;买个厕所都不够&#xff01; 程序员忙说&#xff1a;不是人民币&…
阅读更多...
Android混淆技术综述

Android混淆技术综述

1. 引入 大量的恶意软件都使用了混淆技术来逃检测。查了下Android混淆技术&#xff0c;看了如下两篇资料&#xff1a; Understanding Android Obfuscation Techniques: A Large-Scale Investigation in the Wildhttps://github.com/ClaudiuGeorgiu/Obfuscapk 对Android的混淆…
阅读更多...
logging日志管理

logging日志管理

1.日志作用 不管是在项目开发还是测试过程中&#xff0c;项目运行一旦出现问题日志信息就非常重要了。日志是定位问题的重要手段&#xff0c;就像侦探人员要根据现场留下的线索来推断案情。 2.日志级别 脚本运行会有很多的情况&#xff0c;比如调试信息、报错异常信息等。日…
阅读更多...
渣土车空车未盖盖识别系统 OpenCv

渣土车空车未盖盖识别系统 OpenCv

渣土车空车未盖盖识别系统通过OpenCvyolo网络模型实时检测路过的渣土车情况&#xff0c;发现空车未盖盖立即进行抓拍回传。OpenCV基于C实现&#xff0c;同时提供python, Ruby, Matlab等语言的接口。OpenCV-Python是OpenCV的Python API&#xff0c;结合了OpenCV CAPI和Python语言…
阅读更多...
Android开发中的线程池使用

Android开发中的线程池使用

一、前言 既然Android中已经有了线程的概念&#xff0c;那么为什么需要使用线程池呢&#xff1f;我们从两个方面给出使用线程池的原因。 首先线程的新建和销毁都是存在性能上的消耗的&#xff0c;如果一个时间段有大量的网络请求&#xff0c;那么就需要多个线程的创建与销毁&am…
阅读更多...
NSGA and NSGA-II

NSGA and NSGA-II

目录1 NSGA1.1 传统多目标优化方法1.2 多目标转为单目标的缺点1.3 权重向量距离说明1.4 NSGA方法1.4.1 流程1.4.2 关键步骤1.5 注意2 NSGA-II2.1 NSGA的缺点2.2 NSGA-II在NSGA上的变动2.3 NSGA-II流程1 NSGA 1.1 传统多目标优化方法 使用权重向量&#xff0c;将多目标问题转化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023