圣诞节教你如何用Html+JS+CSS绘制3D动画圣诞树

news2024/9/23 3:13:06

上篇文章给大家提供了一个如何生成静态圣诞树的demo。但是那样还不够高级，如何高级起来，当然是3D立体带动画效果了。

先看效果图：
在这里插入图片描述
源码如下：

<!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>

将源码复制保存到html中打开即可。源码都是些基本的知识，不过多讲解。

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

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

相关文章

Git实战（五）| 让工作更高效，搞定Git的分支管理

Git实战（五）| 让工作更高效，搞定Git的分支管理

上一篇讲到Git的分支管理实操&#xff0c;在线合并和本地合并都进行了实操。毕竟&#xff1a;光说不练是假把式。而只练不整理&#xff0c;只能是傻把式了。分支管理到底如何进行管理呢&#xff1f; 先以GitLab上的一张经典的图打头&#xff0c;作为一个总体概览&#xff0c;也…
阅读更多...
数据合规圈必读！《数据合规：实务、技术与法律解码》新书发布！算力智库创始人燕丽盈科律所刘磊联袂著作

数据合规圈必读！《数据合规：实务、技术与法律解码》新书发布！算力智库创始人燕丽盈科律所刘磊联袂著作

今年10月&#xff0c;上海网信办某科技公司因处理政务类数据时违规操作&#xff0c;被责令整改&#xff0c;并处以五万元罚款。 今年7月26日&#xff0c;广州市在净网“2022”专项行动中&#xff0c;某技术公司一款APP系统因未履行数据安全保护义务&#xff0c;导致1000万余条…
阅读更多...
ubuntu 20.04 设置DNS

ubuntu 20.04 设置DNS

ubuntu 20.04 设置DNSubuntu 20.04 设置DNS 快捷步骤下面是命令解释1、决定系统dns的文件是/etc/resolv.conf2、谁能影响/etc/resolv.conf3、/etc/resolv.conf软链接到/run/systemd/resolve/resolv.confubuntu 20.04 设置DNS 快捷步骤 修改 /etc/systemd/resolved.conf 文件&a…
阅读更多...
阿里内部出品的这5份手册的含金量有多高，你不会还不知道吧

阿里内部出品的这5份手册的含金量有多高，你不会还不知道吧

前言 秋招过去也是有一个月有余了,该说不说顺利的伙计已经拿下offer了,肯定还有部分的伙计还在苦苦挣扎中,这里小编只说一句话,革命还未成功,同志们仍需努力哈哈哈,拿下offer了才能稳稳当当的坐住,坐踏实,那么问题来了,有些伙计在做面试准备的时候总是会抓不到重点,忽略一些重…
阅读更多...
2023最新SSM计算机毕业设计选题大全（附源码+LW）之java成绩管理与学情分析系统11yzf

2023最新SSM计算机毕业设计选题大全（附源码+LW）之java成绩管理与学情分析系统11yzf

好的选题直接决定了毕业设计好坏&#xff0c;甚至决定了能否毕业。今天&#xff0c;我们就来聊一聊毕设该怎么选题。 这里分三个选题标准。 第一&#xff0c;参考所在学校往年选题类型和难度 可以向学长学姐了解往年的选题类型&#xff0c;以及使用的技术&#xff0c;不用向…
阅读更多...
win10下PyUSB访问USB驱动

win10下PyUSB访问USB驱动

目录 一、安装pyusb 二、下载工具zadig 三、确认目标USB设备 四、为目标设备安装USB驱动 五、测试代码 六、小结 1. 关于环境搭建 2. 关于总线上的数据 环境&#xff1a; Win10专业版Python3.8.7 一、安装pyusb 命令 pip install pyusb 二、下载工具zadig Zadig是…
阅读更多...
[附源码]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;…
阅读更多...
数据库索引分裂 问题分析

数据库索引分裂 问题分析

1、背景描述&#xff1a; 某客户反馈在 18 点 30 分左右出现性能问题&#xff0c;活动会话飙升&#xff0c;业务卡顿。 2、问题分析 通过awr 可以看到大量的索引分裂等待&#xff0c;和并发的事务槽等待&#xff0c;事务槽的并发等待是由于索引分裂阻塞大量会话导致的并发加剧…
阅读更多...
测试gitlab-runner

测试gitlab-runner

上一篇&#xff1a;Docker安装Gitlab-ruuner_素心如月桠的博客-CSDN博客https://blog.csdn.net/m0_47010003/article/details/127997515 总结&#xff1a; 上一篇中操作到&#xff1a; &#x1f4cc;安装了gitlab-runner&#xff0c;在gitlab中创建一个项目&#xff08;testci&…
阅读更多...
Java匿名内部类

Java匿名内部类

Java匿名内部类\huge{Java匿名内部类}Java匿名内部类 匿名内部类 ①. 概念&#xff08;定义&#xff09; 通俗一点来讲匿名内部类就是没有名字的局部内部类。 注意这里的两点&#xff1a; 没有名字局部内部类 ②. 作用 方便创建子类的对象&#xff0c;最终的目的是简化代…
阅读更多...
Linux内核Hook系统调用execve

Linux内核Hook系统调用execve

在Linux系统中&#xff0c;用户层程序无法直接控制系统内核&#xff0c;只能通过系统调用。 一般调用顺序为: 用户进程->execve()->syscall()->stub_execve()->sys_execve()-> do_execve()..... 本文章使用的是国产uos-Linux&#xff0c;内核为 4.19.0-amd64-…
阅读更多...
数组实现单链表和双链表

数组实现单链表和双链表

全文目录&#x1f600; 数组实现的优势&#x1f914; 单链表&#x1f615; 初始化&#x1f615; 头插&#x1f615; 在下标 k 后面插入元素&#x1f615; 删除下标 k 后面的元素&#x1f615; 遍历&#x1f635;‍&#x1f4ab; 双链表&#x1f928; 初始化&#x1f928; 插入&…
阅读更多...
利用Python自制一个批量图片水印添加器

利用Python自制一个批量图片水印添加器

前段时间写了个比较简单的批量水印添加的python实现方式&#xff0c;将某个文件夹下面的图片全部添加上水印。 今天正好有时间就做了一个UI应用的封装&#xff0c;这样不需要知道python直接下载exe的应用程序使用即可。 下面主要来介绍一下实现过程。 首先&#xff0c;还是老…
阅读更多...
WebDAV之葫芦儿·派盘 + PDF Expert

WebDAV之葫芦儿·派盘 + PDF Expert

PDF Expert 支持WebDAV方式连接葫芦儿派盘。 推荐一款备受称赞的PDF阅读工具PDF Expert，一款超简单的PDF编辑器。 PDF Expert是一款macOS上的办公软件，它具有专业的PDF编辑功能，可以快速从邮件、网页支持PDF打开，支持用户进行阅读、批注等功能，用户可以直接在PDF上进行…
阅读更多...
机器学习10线性回归法Linear Regression

机器学习10线性回归法Linear Regression

文章目录一、线性回归算法简介二、简单线性回归的实现三、向量化运算四、衡量线性回归法的指标&#xff0c;MSE,RMS,MAEMSE均方误差&#xff08;Mean Squared Error&#xff09;RSE均方误差&#xff08;Root Mean Squared Error&#xff09;平均绝对误差MAE&#xff08;Mean Ab…
阅读更多...
在职场，如何克服拖延症？

在职场，如何克服拖延症？

在职场&#xff0c;你遇见过这样的情况吗&#xff1a;领导让你写一份方案&#xff0c;你一拖再拖&#xff0c;直到最后一天才打开电脑。 这就是拖延症的表现。很多人做一件事常常拖到截止时间的临界点&#xff0c;才被压力所迫开始做事。 也有的人是因为觉得自己解决不了事情&…
阅读更多...
PXE + Kickstart 服务器批量安装Linux系统

PXE + Kickstart 服务器批量安装Linux系统

一、无人值守安装服务 使用光盘镜像来安装Linux系统的方法，该方法适用于只安装少量Linux系统的情况。如果生产环境中有数百台服务器都需要安装系统，这种方式就不合时宜了。这时，我们就需要使用PXE + TFTP +HTTP + DHCP + Kickstart服务搭建出一个无人值守安装系统。这种无人…
阅读更多...
vue中提示框 this.$confirm如何让提示框换行

vue中提示框 this.$confirm如何让提示框换行

let confirmText [案件号为response.businessInformation.claimNo, 点击确认跳转到查勘继续操作该案件,点击取消跳转到新建赔案查询页面] const newDatas [] const h this.$createElement for (const i in confirmText) { newDatas.pu…
阅读更多...
「Whale 帷幄」SpaceSight 产品升级 | 打造门店数智化未来

「Whale 帷幄」SpaceSight 产品升级 | 打造门店数智化未来

11月&#xff0c;「帷幄数智空间 Whale SpaceSight」迎来新的功能更新&#xff0c;一起来看一看&#xff0c;它将为您的门店数字化带来哪些强大助力。 我们将通过三篇系列文章&#xff0c;为您介绍 SpaceSight 在出入口客流分析、店内客流分析、门店巡检三大场景下&#xff0c;…
阅读更多...
[附源码]计算机毕业设计JAVA郑工校园二手交易平台网站

[附源码]计算机毕业设计JAVA郑工校园二手交易平台网站

[附源码]计算机毕业设计JAVA郑工校园二手交易平台网站 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023