2022年圣诞节 | 用代码实现简单圣诞树

news2024/11/16 7:23:51

2022年圣诞节到来啦，很高兴这次我们又能一起度过~

一、前言

本文我们用 Python 来画一棵带背景音乐效果的雪夜圣诞树以及使用 HTML+CSS+JS 在页面渲染出动态圣诞树，所涉及到的源码均来自GitHub开源站点。

二、效果展示

Python

在这里插入图片描述

HTML+CSS+JS

在这里插入图片描述

三、编码实现

Python代码

import pygame
import random

# 初始化 pygame
pygame.init()
# 设置屏幕宽高，根据背景图调整
bg_img = "bg.png"
bg_size = (609, 601)
screen = pygame.display.set_mode(bg_size)
pygame.display.set_caption("雪夜圣诞树")
bg = pygame.image.load(bg_img)
# 雪花列表
snow_list = []
for i in range(150):
    x_site = random.randrange(0, bg_size[0])   # 雪花圆心位置
    y_site = random.randrange(0, bg_size[1])   # 雪花圆心位置
    X_shift = random.randint(-1, 1)         # x 轴偏移量
    radius = random.randint(4, 6)           # 半径和 y 周下降量
    snow_list.append([x_site, y_site, X_shift, radius])
# 创建时钟对象
clock = pygame.time.Clock()
# 添加音乐
track = pygame.mixer.music.load('my.mp3')  # 加载音乐文件
pygame.mixer.music.play()  # 播放音乐流
pygame.mixer.music.fadeout(600000)  # 设置音乐结束时间
done = False
while not done:
    # 消息事件循环，判断退出
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True
    screen.blit(bg, (0, 0))
    # 雪花列表循环
    for i in range(len(snow_list)):
        # 绘制雪花，颜色、位置、大小
        pygame.draw.circle(screen, (255, 255, 255), snow_list[i][:2], snow_list[i][3] - 3)
        # 移动雪花位置（下一次循环起效）
        snow_list[i][0] += snow_list[i][2]
        snow_list[i][1] += snow_list[i][3]
        # 如果雪花落出屏幕，重设位置
        if snow_list[i][1] > bg_size[1]:
            snow_list[i][1] = random.randrange(-50, -10)
            snow_list[i][0] = random.randrange(0, bg_size[0])
    # 刷新屏幕
    pygame.display.flip()
    clock.tick(30)
# 退出
pygame.quit()

HTML+CSS+JS

index.html代码

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="utf-8">

		<meta name="description" content="A Christmas tree built out of form elements." />
		<meta name="author" content="Hakim El Hattab" />

		<meta http-equiv="X-UA-Compatible" content="chrome=1">

        <title>DOM Tree</title>

		<link href="css/domtree.css" rel="stylesheet" media="screen" />

		<link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>

    </head>
    <body>
    	<div class="tree"></div>

		<script src="js/domtree.js"></script>

		<!-- Third party scripts and sharing UI -->
		<p class="project-title">DOM Tree</p>

		<div class="credits">
			<a href="https://github.com/hakimel/dom-tree">Source on GitHub</a>
			<a href="https://twitter.com/share?text=A%20Christmas%20tree%20made%20out%20of%20form%20elements&url=http://lab.hakim.se/domtree&via=hakimel&related=hakimel" target="_blank">Tweet this</a>
			<a href="https://twitter.com/hakimel">Follow @hakimel</a>
		</div>

		<style type="text/css" media="screen">
			.project-title {
				position: absolute;
				left: 25px;
				bottom: 20px;

				font-size: 16px;
				color: #fff;
			}

			.credits {
				position: absolute;
				right: 20px;
				bottom: 25px;
				font-size: 15px;
				z-index: 20;
				color: #fff;
				vertical-align: middle;
			}

			.credits * + * {
				margin-left: 15px;
			}

			.credits a {
				padding: 8px 10px;
				color: rgba(255,255,255,0.7);
				border: 2px solid rgba(255,255,255,0.7);
				text-decoration: none;
			}

			.credits a:hover {
				border-color: #fff;
				color: #fff;
			}

			@media screen and (max-width: 1040px) {
				.project-title {
					display: none;
				}

				.credits {
					width: 100%;
					left: 0;
					right: auto;
					bottom: 0;
					padding: 30px 0;
					background: #b72424;
					text-align: center;
				}

				.credits a {
					display: inline-block;
					margin-top: 7px;
					margin-bottom: 7px;
				}
			}
		</style>

		<script>
			var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
			(function(d, t) {
			var g = d.createElement(t),
			    s = d.getElementsByTagName(t)[0];
			g.async = true;
			g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			s.parentNode.insertBefore(g, s);
			})(document, 'script');
		</script>

    </body>
</html>

domtree.css代码


/*********************************************
 * RESET
 *********************************************/

html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
/*input[type="Submit"]{cursor:pointer;}*/
strong {font-weight: bold;}


/*********************************************
 * GLOBAL
 *********************************************/

body, html {
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: 11px;

	width: 100%;
	height: 100%;

	background: #b72424;
	background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b72424), color-stop(100%,#492727));
	background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);
	background: radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);
}

@keyframes spin {
	0% { transform: rotateY( 0deg ); }
	100% { transform: rotateY( 360deg ); }
}

body {
	perspective: 3000px;
	perspective-origin: 0 20%;
}

.tree {
	margin: 0 auto;
	position: relative;
	animation: spin 18s infinite linear;
	transform-origin: 50% 0;
	transform-style: preserve-3d;
}

.tree * {
	position: absolute;
	transform-origin: 0 0;
}

domtree.js代码

const width = 500;
const height = 600;
const quantity = 150;
const types = [ 'text', 'select', 'progress', 'meter', 'button', 'radio', 'checkbox' ];
const greetings = [ 'Joyeuses Fêtes','Felices Fiestas','God Jul','Boas Festas','Mutlu Bayramlar','Sarbatori Fericite','Jie Ri Yu Kuai','Bones Festes','Tanoshii kurisumasu wo','Buone Feste','Happy Holidays', 'Ii holide eximnandi','Frohe Feiertage','Prettige feestdagen','Beannachtaí na Féile','Vesele Praznike','Selamat Hari Raya','Sretni praznici' ];

let tree = document.querySelector( '.tree' ),
	treeRotation = 0;

tree.style.width = width + 'px';
tree.style.height = height + 'px';

window.addEventListener( 'resize', resize, false );

// The tree
for( var i = 0; i < quantity; i++ ) {
	let element = null,
		type = types[ Math.floor( Math.random() * types.length ) ],
		greeting = greetings[ Math.floor( Math.random() * greetings.length ) ];

	let x = width/2,
		y = Math.round( Math.random() * height );

	let rx = 0,
		ry = Math.random() * 360,
		rz = -Math.random() * 15;

	let elemenWidth = 5 + ( ( y / height ) * width / 2 ),
		elemenHeight = 26;

	switch( type ) {
		case 'button':
			element = document.createElement( 'button' );
			element.textContent = greeting;
			element.style.width = elemenWidth + 'px';
			element.style.height = elemenHeight + 'px';
			break;
		case 'progress':
			element = document.createElement( 'progress' );
			element.style.width = elemenWidth + 'px';
			element.style.height = elemenHeight + 'px';
			if( Math.random() > 0.5 ) {
				element.setAttribute( 'max', '100' );
				element.setAttribute( 'value', Math.round( Math.random() * 100 ) );
			}
			break;
		case 'select':
			element = document.createElement( 'select' );
			element.setAttribute( 'selected', greeting );
			element.innerHTML = '<option>' + greetings.join( '</option><option>' ) + '</option>';
			element.style.width = elemenWidth + 'px';
			element.style.height = elemenHeight + 'px';
			break;
		case 'meter':
			element = document.createElement( 'meter' );
			element.setAttribute( 'min', '0' );
			element.setAttribute( 'max', '100' );
			element.setAttribute( 'value', Math.round( Math.random() * 100 ) );
			element.style.width = elemenWidth + 'px';
			element.style.height = elemenHeight + 'px';
			break;
		case 'text':
		default:
			element = document.createElement( 'input' );
			element.setAttribute( 'type', 'text' );
			element.setAttribute( 'value', greeting );
			element.style.width = elemenWidth + 'px';
			element.style.height = elemenHeight + 'px';
	}

	element.style.transform = `translate3d(${x}px, ${y}px, 0px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;

	tree.appendChild( element );
}

// Let it snow
for( var i = 0; i < 200; i++ ) {
	let element = document.createElement( 'input' );
	element.setAttribute( 'type', 'radio' );

	let spread = window.innerWidth/2;

	let x = Math.round( Math.random() * spread ) - ( spread / 4 ),
		y = Math.round( Math.random() * height ),
		z = Math.round( Math.random() * spread ) - ( spread / 2 );

	let rx = 0,
		ry = Math.random() * 360,
		rz = 0;

	if( Math.random() > 0.5 ) element.setAttribute( 'checked', '' );

	element.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;

	tree.appendChild( element );
}

function resize() {
	tree.style.top = ( ( window.innerHeight - height - 100 ) / 2 ) + 'px';
}

resize();

四、源码获取

Python：https://pan.baidu.com/s/1rW_4ZS_2YdK3CXTl8iBStw?pwd=onla
HTML+CSS+JS：https://github.com/hakimel/DOM-Tree

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

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

相关文章

（六）汇编语言——包含多个段的程序

（六）汇编语言——包含多个段的程序

目录 使用数据 使用栈 代码 总结 使用数据 首先&#xff0c;我们来看一个问题&#xff0c;就是编程计算0123H&#xff0c;0456H&#xff0c;0789H&#xff0c;0abcH&#xff0c;0defH&#xff0c;0fedH&#xff0c;0cbaH&#xff0c;0987H的和&#xff0c;结果存在ax寄存器…
阅读更多...
《剑指offer》每日三题

《剑指offer》每日三题

这里使用的是题库&#xff1a; https://leetcode.cn/problem-list/xb9nqhhg/?page1 目录剑指 Offer 07. 重建二叉树剑指 Offer 14- I. 剪绳子剑指 Offer 14- II. 剪绳子 II剑指 Offer 07. 重建二叉树 递归思想&#xff1a; 代码 class Solution {int pPre0;//用于遍历preorde…
阅读更多...
深入理解HashMap

深入理解HashMap

HashMap集合 1. HashMap集合简介 HashMap基于哈希表的Map接口实现,是以key-value存储形式存在,即主要用来存放键值对。hashMap的实现不是同步的&#xff0c;这就意味着它不是线程安全的。它的key、value都可以为null。此外&#xff0c;HashMap中的映射不是有序的。 JDK1.8之前…
阅读更多...
短视频上热门技巧总结，这样做你也可以快速上热门。

短视频上热门技巧总结，这样做你也可以快速上热门。

最近开始做短视频&#xff0c;找了很多短视频运营创作技巧&#xff0c;但能上热门的只有那么几个&#xff0c;经过近一周的分析&#xff0c;结合了我赢上短视频运营创作技巧&#xff0c;得到了以下几个经典技巧合集&#xff1a;学会一个就值了。 首先说一下&#xff1a;什么样的…
阅读更多...
团簇生长过程-Ovito渲染

团簇生长过程-Ovito渲染

文章目录一、选择出团簇原子和非团簇原子1. 选择团簇原子2. 删除非团簇原子二、选择出团簇原子和非团簇原子1. 团簇分析2. 团簇具体信息三、渲染团簇1、 对团簇进行选择2、 获得团簇渲染后的结果四、渲染结果五、 案例dump下载博文《根据近邻列表法识别团簇—冷凝成核 MatlabOv…
阅读更多...
java06-面向对象1

java06-面向对象1

一&#xff1a;面向对象学习内容&#xff1a; 1.java 类及成员&#xff1a;属性、方法、构造器、代码块、内部类 2.面向对象三大特征&#xff1a;封装、继承、多态 3.其他关键字&#xff1a;this、super static、final、abstact、interface 、package、import 二&#xff…
阅读更多...
iPhone/iPad上值得推荐的5个免费PDF转Word

iPhone/iPad上值得推荐的5个免费PDF转Word

PDF 文件是在不同平台上传输数据的最便捷方式&#xff0c;可确保保持高端信息质量。处理将不同文件格式转换为 PDF 的任务通常很麻烦&#xff0c;尤其是在 iOS 设备上。为了解决这个问题&#xff0c;这里讨论了您可以轻松依赖的前 5 个iPhone PDF 转换器工具。 适用于 iPhone 和…
阅读更多...
多传感器融合定位六-惯性导航原理及误差分析

多传感器融合定位六-惯性导航原理及误差分析

多传感器融合定位六-惯性导航原理及误差分析1. 惯性技术简介1.1 惯性技术发展历史1.2 惯性器件1.2.1 机械陀螺(几乎没人用了)1.2.2 激光陀螺1.2.3 光纤陀螺1.2.4 MEMS陀螺(常用)1.2.5 加速度计2. 惯性器件误差分析2.1 信号误差组成2.2 Allan方差分析3. 惯性器件内参标定3.1 惯性…
阅读更多...
十六、状态管理——Vuex（1）

十六、状态管理——Vuex（1）

本章概要 简单的状态管理安装 Vuex基本用法 Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。他采用集中式存储来管理应用程序中所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也被集成到了 Vue 官方调试工具 vue-devtools 中…
阅读更多...
跨年夜，想请你看一场烟花秀！

跨年夜，想请你看一场烟花秀！

代码分享地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Cu_lKYfAlMBDttSzhVXPuQ 提取码&#xff1a;2ocd 代码效果展示&#xff1a; 源代码分享如下&#xff1a; <!--* Author: Xiao Wang* Date: 2022-12-30 14:26* Description: --> <!DOCTYPE html …
阅读更多...
剑指 Offer 20. 表示数值的字符串

剑指 Offer 20. 表示数值的字符串

题目 请实现一个函数用来判断字符串是否表示数值&#xff08;包括整数和小数&#xff09;。 数值&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 若干空格 一个 小数 或者 整数 &#xff08;可选&#xff09;一个 ‘e’ 或 ‘E’ &#xff0c;后面跟着一个…
阅读更多...
canopen11-sdo-2b写入命令

canopen11-sdo-2b写入命令

源码 1、SDO介绍 就对象而言，主机要访问节点词典的数据，因此主机是client客户端，节点是server服务器。上传与下载是对服务器来说的（这点和常识有点不太一样）。因此，上传指的是服务器发送数据给客户端，下载是客户端给服务器数据。 我们这里要用主机访问节点服务器2000位…
阅读更多...
Go 语言从入门到实战

Go 语言从入门到实战

《Go 语言从入门到实战》 的学习笔记&#xff0c;欢迎阅读斧正。感觉该专栏整体来说对有些后端编程经验的来说比无后端编程经验的人更友好。 数据类型 运算符 算数运算符 比较运算符 用 比较数组 相同维数切含有相同个数元素的数组才可以比较&#xff0c;每个元素都相同的才…
阅读更多...
四旋翼无人机学习第18节--cadence的bom表、网表导出，PCB板创建，层叠设置

四旋翼无人机学习第18节--cadence的bom表、网表导出，PCB板创建，层叠设置

文章目录1 bom表导出2 网表导出3 PCB板创建4 PCB板文件重要设置5 层叠设置1 bom表导出 1、选择DSN文件&#xff0c;之后依次点击Tools&#xff0c;Bill of Materials。 2、当然&#xff0c;也可以点击图标进行bom导出。 3、下图标出的地方可以自行修改&#xff0c;最后点击O…
阅读更多...
设计师必须知道的 5个设计灵感网站

设计师必须知道的 5个设计灵感网站

设计没灵感&#xff0c;一定要上这5个网站&#xff0c;设计师每天必逛&#xff0c;建议收藏&#xff01; 设计素材免费下载&#xff1a; https://www.sucai999.com/?vNTYwNDUx 国内灵感网 1、设计之窗 http://www.333cn.com/ 设计之窗是一个设计师分享作品及备案的网站&…
阅读更多...
【Ctfer训练计划】——命令执行的解题技巧(持续更新中)

【Ctfer训练计划】——命令执行的解题技巧(持续更新中)

作者名&#xff1a;Demo不是emo 主页面链接&#xff1a;主页传送门创作初心&#xff1a;舞台再大&#xff0c;你不上台&#xff0c;永远是观众&#xff0c;没人会关心你努不努力&#xff0c;摔的痛不痛&#xff0c;他们只会看你最后站在什么位置&#xff0c;然后羡慕或鄙夷座右…
阅读更多...
什么是软考？软考有什么作用？

什么是软考？软考有什么作用？

一、软考是什么&#xff1f; 1.软考介绍 计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试是由国家人力资源和社会保障部、工业和信息化部领导的国家级考试&#xff0c;其目的是&#xff0c;科学、公正地对全国计算机与软件专业技术人员进行职业资格、专业技术…
阅读更多...
保姆教程系列三、Redis高可用（Cluster集群模式）

保姆教程系列三、Redis高可用（Cluster集群模式）

系列文章目录 &#xff01;&#xff01;&#xff01;是的没错&#xff0c;胖友们&#xff0c;保姆教程系列又更新了&#xff01;&#xff01;&#xff01; 保姆教程系列一、Redis部署 so easy 保姆教程系列二、Redis高可用&#xff08;主从同步哨兵模式&#xff09; 保姆教程系…
阅读更多...
java开发的医院体检预约系统

java开发的医院体检预约系统

简介 体检项目预约网站&#xff0c;普通用户注册登录可以网上预约体检项目&#xff0c;经过后台人员审核后可以去体检。用户还可以记录自己的身体指标下载体检报个&#xff0c;查看医嘱等。医院后台可以进行权限管理&#xff0c;实现多角色管理后台的其他业务等&#xff0c;实…
阅读更多...
前端—化繁为简

前端—化繁为简

化繁为简 HTML5要的就是简单、避免不必要的复杂性。HTML5的口号是“简单至上&#xff0c;尽可能简化”。因此&#xff0c;HTML5做了以下改进&#xff1a; 以浏览器原生能力替代复杂的JavaScript代码。 新的简化的DOCTYPE。 新的简化的字符集声明。 简单而强大的HTML5API。 我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023