Python带娃编程系列实践-第1期：明星呼吸灯墙——让女儿和她的偶像“同框”

专栏名称Python带娃编程系列实践专栏作者制造数据与AI践行者老蒋javy21作者CSDN制造数据与AI践行者老蒋-CSDN博客 写在前面我家女儿今年初三粉上了白鹿、范丞丞这些明星房间里一面墙壁改造后贴满了他们的海报。有一天她盯着墙上的海报问我“爸能让这些照片动起来吗就像活过来一样。”我想了想说能。而且用Python不超过100行代码就能做到。想学吗于是就有了这篇教程。明星呼吸灯墙让静态的明星照片像呼吸一样有节奏地放大缩小配上柔和的光晕摆在电脑屏幕上特别酷。效果图如下全程不到50行核心代码女儿从零开始跟着做半小时就跑通了。关键是——她全程没觉得是在“上课”而是在“做自己的作品”。如果你家里也有一个追星的孩子或者你想让孩子觉得“编程挺好玩的”这篇就是为你准备的。本文适合零基础Python新手尤其初中或者高中生以及想带娃入门的家长。⏱️预计耗时环境搭建10分钟 写代码20分钟 半小时跑通。技术栈Python Flask一个极简的Web框架 HTML CSS。 为什么要做这个很多家长问孩子学编程从哪开始我的答案是——从“能看到效果”的东西开始。学编程最大的误区就是让孩子对着黑乎乎的控制台敲print(Hello World)。孩子看不到图形、看不到动画、看不到任何“像软件”的东西很快就觉得无聊了。但如果你让她在浏览器里打开一个页面上面是她喜欢的明星照片每张照片都在像呼吸一样律动——她会觉得“这是我做出来的”然后追着你问“下一个做什么”。这就是兴趣的起点。而且这个案例里藏着几个编程的核心概念列表List—— 管理一堆明星照片循环for循环—— 批量处理每一张照片函数Function—— 把重复的逻辑打包起来前后端交互—— Python在后端处理数据网页在前端展示效果孩子不需要理解这些术语她只需要知道“我改了这段代码页面就变了”——这种“因果感”才是编程思维的核心。️ 需要准备什么硬件方面一台能联网的电脑Windows/Mac都可以。软件方面跟着做10分钟搞定工具作用怎么装Python 3.8运行代码官网 python.org 下载安装PyCharm或VSCode写代码的编辑器社区版免费官网下载FlaskPython的Web框架终端执行pip install flask给家长的建议如果孩子第一次接触编程建议你帮她把环境装好让她专注于“写代码”和“看效果”这两个最有成就感的环节。 项目结构先看一眼心里有数javy21_DadKidsCoding/ ├── app.py # 主程序核心代码就这一个文件 ├── requirements.txt # 依赖清单就一行flask ├── templates/ │ └── week01_breath.html # 页面模板 └── static/ ├── css/ │ └── style.css # 样式呼吸动画的核心在这里 └── images/ └── stars/ # ⭐ 放明星照片的文件夹孩子自己动手放整个项目就4个核心文件加起来不到200行代码。其中真正需要孩子动手写的——几乎只有最后一步把照片放进文件夹。 动手做一步一步来第1步创建项目文件夹在电脑的D:/SRC/wee_projects/下新建一个文件夹叫javy21_DadKidsCoding名字可以自己改但建议用英文。第2步安装Flask打开终端Windows是CMD或PowerShellMac是终端输入pip install flask看到“Successfully installed flask”就成功了。第3步创建requirements.txt在项目文件夹里新建一个文本文件命名为requirements.txt写入# # 作者 : 制造数据与AI践行者老蒋javy21 # CSDN博客 : https://blog.csdn.net/javy21 # 核心内容 : 项目Python依赖包清单 # 安装命令 : pip install -r requirements.txt # Flask3.0.0 requests2.31.0这个文件的作用是——以后换电脑时执行pip install -r requirements.txt就能一键安装所有依赖。第4步创建app.py核心程序在项目文件夹里新建app.py复制下面的代码#!/usr/bin/env python3 # -*- coding: utf-8 -*- # 作者 (Author) : 制造数据与AI践行者老蒋javy21 # CSDN博客地址 : https://blog.csdn.net/javy21 # 文件名称 (Filename): app.py # 核心内容 (Core) : Flask 主入口负责路由分发与数据渲染 # 设计思路 (Logic) : # 1. 初始化 Flask 应用 # 2. 扫描 static/images/stars/ 目录获取所有明星图片 # 3. 为每张图片生成随机旋转角度和错峰延迟时间 # 4. 渲染 HTML 模板传递明星数据 # 适用周次 (Week) : W01 from flask import Flask, render_template import os import random app Flask(__name__) # 明星照片存放目录 STAR_FOLDER os.path.join(app.static_folder, images, stars) app.route(/) def index(): 功能描述首页 - 展示明星呼吸灯墙。 设计思路 1. 扫描 stars 文件夹获取所有图片 2. 为每张图片生成随机倾斜角度和错峰延迟 3. 渲染页面 # 扫描图片文件夹 star_images [] if os.path.exists(STAR_FOLDER): for f in os.listdir(STAR_FOLDER): if f.lower().endswith((.png, .jpg, .jpeg, .gif, .webp)): star_images.append(f) star_images.sort() # 构建每张卡片的数据 star_data [] for idx, filename in enumerate(star_images): display_name os.path.splitext(filename)[0] star_data.append({ name: filename, display_name: display_name, rotation: random.randint(-4, 5), # 随机倾斜 delay: round(idx * 0.25, 2) # 错峰延迟形成波浪 }) return render_template(week01_breath.html, starsstar_data, week_num1) if __name__ __main__: app.run(debugTrue, host0.0.0.0, port5000)这段代码在做什么简单说——它启动了一个小网站扫描你放照片的文件夹把每张照片的信息文件名、旋转角度、呼吸节奏发给网页模板去展示。第5步创建页面模板在项目文件夹里新建一个templates文件夹在里面新建week01_breath.html复制下面的代码{# # 作者 (Author) : 制造数据与AI践行者老蒋javy21 # CSDN博客地址 : https://blog.csdn.net/javy21 # 文件名称 (Filename): week01_breath.html # 核心内容 (Core) : 明星呼吸灯墙页面 # 设计思路 (Logic) : # 1. 接收后端传来的明星数据列表 # 2. 循环生成每张明星卡片拍立得风格 # 3. 每张卡片独立设置旋转角度和动画延迟 # 适用周次 (Week) : W01 #} !DOCTYPE html html langzh-CN head meta charsetUTF-8 title第1周 · 明星呼吸灯墙/title style /* 软木板背景 */ body { margin: 0; min-height: 100vh; background: #d9b382; background-image: radial-gradient(circle at 20% 30%, rgba(255,215,175,0.4) 0%, transparent 30%), radial-gradient(circle at 80% 70%, rgba(160,120,80,0.2) 0%, transparent 40%), repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px, transparent 2px, transparent 8px); padding: 30px 20px; font-family: Comic Sans MS, PingFang SC, cursive; } /* 标题 */ .header { text-align: center; padding: 15px 0 30px 0; } .header h1 { background: #fefefe; padding: 10px 35px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); font-size: 24px; color: #5d4037; display: inline-block; border: 2px dashed #c29a6b; } .header .badge { background: #ff6b6b; color: white; padding: 6px 18px; border-radius: 30px; font-size: 16px; margin-left: 15px; } /* 拍立得卡片容器 */ .polaroid { max-width: 1200px; margin: 0 auto; background: #fefefe; padding: 35px 30px 25px 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); transform: rotate(0.8deg); border-radius: 4px 4px 20px 20px; text-align: center; } /* 明星网格 */ .star-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 40px; padding: 20px 0; } /* 每张明星卡片迷你拍立得 */ .star-card { background: white; padding: 12px 12px 8px 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 2px 2px 8px 8px; transition: transform 0.3s ease; position: relative; width: 160px; } .star-card:hover { transform: scale(1.05) !important; z-index: 999; } /* 图钉 */ .star-card::before { content: ; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-30deg); font-size: 28px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3)); z-index: 10; } /* 明星图片 呼吸动画 */ .star-img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; display: block; background: #eee; animation: breathe 2.5s ease-in-out infinite; } /* 名字 */ .star-name { margin: 8px 0 2px 0; font-size: 16px; font-weight: 600; color: #4a3728; border-top: 1px solid #f0e0d0; padding-top: 6px; } /* ⭐ 呼吸动画关键帧 */ keyframes breathe { 0% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 107, 107, 0.2); } 50% { transform: scale(1.04); box-shadow: 0 0 30px rgba(255, 107, 107, 0.7), 0 0 60px rgba(255, 200, 100, 0.3); } 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 107, 107, 0.2); } } /style /head body div classheader h1 老爸带娃 · 编程奇遇记 span classbadge第1周/span/h1 /div div classpolaroid h2 stylecolor:#5d4037;✨ 明星们的呼吸灯墙 ✨/h2 p stylecolor:#8d6e63; font-size:14px;️ 鼠标放上去会放大哦 ~ 每张照片都在“呼吸”/p div classstar-grid {% for star in stars %} div classstar-card styletransform: rotate({{ star.rotation }}deg); img src{{ url_for(static, filenameimages/stars/ star.name) }} alt{{ star.display_name }} classstar-img styleanimation-delay: {{ star.delay }}s; div classstar-name{{ star.display_name }}/div /div {% endfor %} /div div stylemargin-top: 30px; font-size: 13px; color: #a1887f; border-top: 1px dashed #d7ccc8; padding-top: 15px; 老爸提示每张照片呼吸的节奏不一样像波浪一样扫过~ /div /div /body /html第6步创建样式文件可选但推荐在项目文件夹里新建static/css/style.css把上面HTML里style标签中的内容剪切进去然后在HTML头部改成引用外部样式。这样代码会更整洁。不过对于初学者来说直接把样式写在HTML里更直观——所有东西都在一个文件里改起来方便。第7步⭐ 放照片孩子最喜欢的环节在项目文件夹里新建static/images/stars/文件夹。让女儿自己去百度搜索她喜欢的明星照片白鹿、范丞丞、赵露思……下载后放进这个文件夹。小技巧照片文件名最好用拼音或英文如bailu.jpg、fanchengcheng.jpg避免中文文件名在有些浏览器里显示乱码。照片尺寸建议接近正方形比如300x300显示效果最好。第8步运行在终端里进入项目文件夹执行python app.py然后打开浏览器访问http://127.0.0.1:5000你会看到软木板的背景上一张张“拍立得”照片整齐排列每张照片都在有节奏地“呼吸”——放大、发光、缩小循环往复。而且每张照片的呼吸节奏不一样像波浪一样从左到右扫过去。鼠标放上去照片会放大并暂停呼吸方便仔细看。 核心原理用大白话讲给孩子听这部分是给孩子看的家长可以念给娃听。问照片为什么会“呼吸”答我们给每张照片加了一个“闹钟”CSS动画每隔2.5秒响一次。每次闹钟响的时候照片就做三件事放大一点点从1倍变成1.04倍亮起来加一圈粉色的光晕再缩回去一放大一缩小看起来就像人在呼吸。问为什么每张照片呼吸的节奏不一样答因为每张照片的“闹钟”启动时间不一样。第一张0秒启动第二张0.25秒后启动第三张0.5秒后启动……这样就形成了波浪效果。问代码里哪句是控制这个的答styleanimation-delay: {{ star.delay }}s;—— 这句就是给每张照片设置不同的启动延迟。 让孩子动手改一改锻炼编程思维运行成功后让孩子试试改这几个地方看看会发生什么改什么在哪改改成什么效果会怎样呼吸速度keyframes breathe中的2.5s改成1s呼吸变快像急促喘气呼吸幅度50%中的scale(1.04)改成scale(1.2)照片放大更多像要跳出来光晕颜色box-shadow中的rgba(255,107,107,...)改成rgba(100,200,255,...)粉色光晕变成蓝色这就是编程思维——不是背代码而是改了某个参数观察发生了什么变化然后理解“为什么”。 本篇学到了什么知识点通俗解释列表List把一堆明星照片放在一起管理for循环对每张照片做同样的事情加图钉、加动画CSS动画keyframes告诉浏览器“每隔几秒做一次放大缩小”前后端配合Python负责“找照片”HTML负责“显示照片”参数化思维改一个数字就能改变整个效果 下期预告第2周我们要做的是——《王者荣耀经济曲线》。女儿打游戏的时候我们让她记录一局游戏里不同时间点的金币数量然后用Python画出一条“经济走势图”。为什么做这个因为孩子对游戏感兴趣而“数据可视化”是编程里非常实用的一项技能。把游戏数据变成图表她会觉得“编程还能干这个”敬请期待 想听听你的反馈这篇教程是【Python带娃编程系列实践】的第1期。我计划每周更新一篇持续一年带着女儿从零开始一步步走进编程的世界。如果你带着孩子跟着做了欢迎在评论区告诉我孩子看到呼吸灯墙时的反应是什么她最喜欢哪个明星的照片有没有遇到什么问题你的反馈会帮助我把后面的教程写得更好。如果有特别想做的主题小游戏、小工具、数据图表……也可以在评论区告诉我我会考虑加到后面的计划里。源码地址还在整理中会在评论区留言说明的。专栏目录【Python带娃编程系列实践】——每周一篇从零到一。关于作者制造数据与AI践行者老蒋javy2120多年软件行业老兵CSDN博客专家。用代码陪伴女儿成长。下一篇见