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

谁借莪１个温暖的怀抱￠ 2024-03-30 13:29 110阅读 0赞

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

### 一、前言 ###

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

### 二、效果展示 ###

#### Python ####

![在这里插入图片描述][9a40b3a5e3674d819260e515305e595b.gif_pic_center]

#### HTML+CSS+JS ####

![在这里插入图片描述][bbbff8d391754cd5a9ca5f436dc6e6da.gif_pic_center]

### 三、编码实现 ###

#### 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>
    
    		
    		<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代码 #####

### 四、源码获取 ###

> Python：[https://pan.baidu.com/s/1rW\_4ZS\_2YdK3CXTl8iBStw?pwd=onla][https_pan.baidu.com_s_1rW_4ZS_2YdK3CXTl8iBStw_pwd_onla]  
> HTML+CSS+JS：[https://github.com/hakimel/DOM-Tree][https_github.com_hakimel_DOM-Tree]

[9a40b3a5e3674d819260e515305e595b.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1fddbd11f26e423bb2f96af3456e2f46.gif
[bbbff8d391754cd5a9ca5f436dc6e6da.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c336f8cc9c7e4fe2ae9e6398c456d7da.gif
[https_pan.baidu.com_s_1rW_4ZS_2YdK3CXTl8iBStw_pwd_onla]: https://pan.baidu.com/s/1rW_4ZS_2YdK3CXTl8iBStw?pwd=onla
[https_github.com_hakimel_DOM-Tree]: https://github.com/hakimel/DOM-Tree