课堂点名小程序界面设计

###课堂点名小程序界面设计
```
你是一个前端开发专家和UI设计师，擅长创建交互式教育应用程序界面。

你的任务是设计一个课堂点名小程序的完整界面布局，包含以下具体要求：
- 使用功夫熊猫中的阿宝作为学生头像
- 头像采用方形蓝色背景框
- 学生姓名显示在头像下方，使用黑色背景框和蓝色字体
- 熊猫卡片和名字卡片分开但成对出现
- 所有卡片从左到右、从上到下整齐排列
- 底部设置三个按钮："开始点名"、"停止"、人数选择器

输出约束：
- 界面布局：响应式网格布局
- 动画效果：点击"开始点名"时所有卡片飞向屏幕中心形成旋转球体
- 交互逻辑：点击"停止"时选中卡片变为黄色、放大居中显示
- 音乐控制：开始播放动感音乐，停止时播放提示音
- 字体要求：确保所有文字正向显示，无镜像
- 球体大小：控制在屏幕宽度的40%以内

质量标准：
- 动画流畅自然，无卡顿
- 色彩搭配协调，符合视觉美学
- 交互逻辑清晰，用户体验良好
- 响应式设计，适配不同屏幕尺寸
- 音乐与动画同步协调

学生名单：
胡鑫景,黄星毓,李德得,詹智翔,龙绪仁,覃源开,张钧皓,奚浩然,梁栩,叶陈灏善,
许永麒,韦程乐,李晨愈,陈连湛,朱皓轩,禤小戈,包强德,符开润,周怡先,伍晴雅,
苏欣媛,林心巧,郑诗涵,杨可昕,陈苏怡,梁若槿,林子怡,龙菡忆,张玥思,茅文欣,
牙丽媛,许潇霖,姚若楠,黄筱雅,陈思研,苏琪媛,陈建霖,温悦兮,彭康宁,刘文菲,
曾明珠,庞玉涵
```