国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<nobr id="y1zeb"><b id="y1zeb"></b></nobr>

圣誕節(jié)教你如何用Html+JS+CSS繪制3D動(dòng)畫(huà)圣誕樹(shù)

2年前作者：stalin_分類：Toy博客閱讀(28)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了圣誕節(jié)教你如何用Html+JS+CSS繪制3D動(dòng)畫(huà)圣誕樹(shù)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

上篇文章給大家提供了一個(gè)如何生成靜態(tài)圣誕樹(shù)的demo。但是那樣還不夠高級(jí)，如何高級(jí)起來(lái)，當(dāng)然是3D立體帶動(dòng)畫(huà)效果了。

先看效果圖：
3d粒子圣誕樹(shù)用html的做法,前端,javascript,css,3d圣誕樹(shù),生成圣誕樹(shù),圣誕樹(shù)
源碼如下：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>圣誕樹(shù)</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>

將源碼復(fù)制保存到html中打開(kāi)即可。源碼都是些基本的知識(shí)，不過(guò)多講解。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-771750.html

到了這里，關(guān)于圣誕節(jié)教你如何用Html+JS+CSS繪制3D動(dòng)畫(huà)圣誕樹(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

Python生成圣誕節(jié)詞云-代碼案例剖析【第17篇—python圣誕節(jié)系列】
這段代碼使用了jieba進(jìn)行中文分詞，結(jié)合stylecloud庫(kù)生成了一個(gè)基于指定配色方案的圣誕主題詞云圖。以下是對(duì)代碼的解釋： import jieba ：導(dǎo)入中文分詞庫(kù)jieba。 import re ：導(dǎo)入正則表達(dá)式庫(kù)。 from stylecloud import gen_stylecloud ：導(dǎo)入stylecloud庫(kù)中的生成詞云圖的函數(shù)。 from PIL import
2024年02月04日
瀏覽(23)
MATLAB | 圣誕節(jié)快到了，一起畫(huà)兩款動(dòng)態(tài)圣誕樹(shù)吧~
hey, 圣誕節(jié)又雙要到了，提前祝各位MATLABer，各位準(zhǔn)研究生們，圣誕快樂(lè)，旗開(kāi)得勝！~ 今天帶來(lái)兩款圣誕樹(shù)哈，都是可以旋轉(zhuǎn)的：原理和我去年發(fā)的圣誕樹(shù)非常像，大家如果感興趣可以去自行搜一下哈，這里就不浪費(fèi)大篇幅寫(xiě)原理啦，此外，金色圣誕樹(shù)的外形參考了以下兩部
2024年02月03日
瀏覽(21)
Python生成高級(jí)圣誕樹(shù)-代碼案例剖析【第16篇—python圣誕節(jié)系列】
這段代碼是使用turtle庫(kù)創(chuàng)建一個(gè)圖形界面，繪制了一組彩色的正方形和圓形，最終呈現(xiàn)出一幅圖案。以下是對(duì)代碼的解析：屏幕=。屏幕（）：創(chuàng)建了一個(gè)Turtle屏幕對(duì)象。 screen.setup(375, 700) ：設(shè)置屏幕大小為375x700像素。圓圈=。（）：創(chuàng)建了一個(gè)Turtle對(duì)象，命名為circle。 c
2024年02月03日
瀏覽(89)
股市中的Santa Claus Rally (圣誕節(jié)行情）
Santa Claus Rally 是指 12 月 25 日圣誕節(jié)前后股市的持續(xù)上漲這樣一個(gè)現(xiàn)象?！豆善苯灰讍T年鑒》的創(chuàng)始人 Yale Hirsch 于 1972 年創(chuàng)造了這個(gè)定義，他將當(dāng)年最后五個(gè)交易日和次年前兩個(gè)交易日的時(shí)間范圍定義為反彈日期。根據(jù) CFRA Research 的發(fā)現(xiàn)，自 1945 年以來(lái)，SP 500 指數(shù)（標(biāo)準(zhǔn)普
2024年02月03日
瀏覽(20)
前端簡(jiǎn)單動(dòng)態(tài)圣誕樹(shù)動(dòng)畫(huà)（HTML、js、css）
效果展示： ?注釋：整體圣誕樹(shù)分為3個(gè)部分，書(shū)的主干、粒子特效、樹(shù)上的卡片樹(shù)上的卡片(重點(diǎn))：每一張卡片上都有一個(gè)名字，代表圣誕樹(shù)的葉子，后面可以根據(jù)自己需求更改，比如全部改成喜歡人的名字，在JS代碼的第五行內(nèi)更改內(nèi)容樹(shù)的動(dòng)態(tài)旋轉(zhuǎn)通過(guò)js實(shí)現(xiàn)、主干是
2024年02月04日
瀏覽(20)
教你如何用fiddler抓取https（詳細(xì)教程）
對(duì)于想抓取HTTPS的測(cè)試初學(xué)者來(lái)說(shuō)，常用的工具就是fiddler，可是在初學(xué)時(shí)，大家對(duì)于fiddler如何抓取HTTPS真是傷了腦筋，可能你一步步按著網(wǎng)上的帖子成功了，那當(dāng)然是極好的，有可能沒(méi)有成功，這時(shí)候你就很抓狂了，我把網(wǎng)絡(luò)上的教程進(jìn)行了整合和一些我的安裝經(jīng)驗(yàn)（其中注
2024年02月10日
瀏覽(19)
教你如何用Python做人臉識(shí)別，簡(jiǎn)單易學(xué)！
Python是一種計(jì)算機(jī)編程語(yǔ)言以及配套的軟件工具和庫(kù)。Python簡(jiǎn)單易學(xué)，代碼十分簡(jiǎn)潔，它使用強(qiáng)制空白符作為縮進(jìn)，這大大提高了Python的開(kāi)發(fā)效率，使用Python能夠在更短的時(shí)間內(nèi)完成更多的工作。Python是一門開(kāi)源的語(yǔ)言，并且Python還有許多強(qiáng)大的開(kāi)源庫(kù)，這些庫(kù)使得Python無(wú)論
2024年02月14日
瀏覽(15)
教你如何用Vue3搭配Spring Framework
摘要：在本文中，我們將介紹如何使用Vue3和Spring Framework進(jìn)行開(kāi)發(fā)，并創(chuàng)建一個(gè)簡(jiǎn)單的TodoList應(yīng)用程序。本文分享自華為云社區(qū)《Vue3搭配Spring Framework開(kāi)發(fā)【Vue3應(yīng)用程序?qū)崙?zhàn)】》，作者：黎燃。 Vue3和Spring Framework都是現(xiàn)代Web應(yīng)用程序開(kāi)發(fā)中最流行的框架之一。 Vue3是一個(gè)流行
2024年02月11日
瀏覽(23)
【公開(kāi)課報(bào)名】騰訊產(chǎn)品經(jīng)理教你如何用好騰訊會(huì)議
對(duì)開(kāi)發(fā)者而言，這是一個(gè)最好的時(shí)代。傳統(tǒng)產(chǎn)業(yè)逐漸走向成熟，大數(shù)據(jù)、物聯(lián)網(wǎng)、云計(jì)算、人工智能等各種新興技術(shù)百花齊放，開(kāi)發(fā)者大有用武之地。在這些科技浪潮下，企業(yè)數(shù)字化轉(zhuǎn)型已是大勢(shì)所趨。但與此同時(shí)，新技術(shù)層出不窮的涌現(xiàn)，也讓開(kāi)發(fā)者會(huì)產(chǎn)生不同的焦慮。
2024年02月14日
瀏覽(22)
論文篇：教你如何用chatgpt輔助寫(xiě)論文文獻(xiàn)綜述
? ChatGPT教你寫(xiě)文獻(xiàn)綜述的模版當(dāng)前文獻(xiàn)綜述的模版：一、緒論： 1. XX話題背景介紹 2. XX話題的研究重要性及意義 3. XX話題的研究現(xiàn)狀回顧二、相關(guān)方法： 1. XX話題的一般方法介紹 2. XX話題的先進(jìn)方法討論三、研究結(jié)果： 1. XX話題的實(shí)驗(yàn)結(jié)果分析 2. XX話題實(shí)驗(yàn)結(jié)果相關(guān)研究
2024年02月12日
瀏覽(24)