科学老师课堂点名
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap');
body {
font-family: 'ZCOOL QingKe HuangYou', cursive;
background-color: #2c3e50;
color: #ecf0f1;
text-align: center;
padding: 20px;
margin: 0;
}
h1 {
font-family: 'Ma Shan Zheng', cursive;
color: #f1c40f;
font-size: 2.5em;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #34495e;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.class-selector {
margin-bottom: 30px;
}
.class-btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
margin: 0 10px;
border-radius: 50px;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s;
font-family: 'ZCOOL QingKe HuangYou', cursive;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.class-btn:hover {
background-color: #2980b9;
transform: translateY(-3px);
}
.class-btn.active {
background-color: #e74c3c;
transform: translateY(-3px);
}
.action-buttons {
margin-bottom: 30px;
}
.action-btn {
background-color: #2ecc71;
color: white;
border: none;
padding: 15px 25px;
margin: 0 10px;
border-radius: 50px;
font-size: 1.3em;
cursor: pointer;
transition: all 0.3s;
font-family: 'ZCOOL QingKe HuangYou', cursive;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.action-btn:hover {
background-color: #27ae60;
transform: translateY(-3px);
}
.action-btn:disabled {
background-color: #95a5a6;
cursor: not-allowed;
transform: none;
}
.result-container {
min-height: 200px;
background-color: #3d566e;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
.result-text {
font-size: 2em;
margin: 10px 0;
transition: all 0.3s;
}
.selected {
font-weight: bold;
font-size: 2.5em;
color: #f1c40f;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinning {
animation: spin 0.2s linear infinite;
}
.group-result {
font-size: 3em;
color: #e74c3c;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.two-students {
display: flex;
justify-content: space-around;
width: 100%;
}
.student-name {
font-size: 1.8em;
margin: 0 20px;
transition: all 0.3s;
}
<div class="container">
<h1>✨ 科学老师课堂点名 ✨</h1>
<div class="class-selector">
<h2>请选择班级：</h2>
四（16）班
四（17）班
四（18）班
</div>
<div class="action-buttons">
开始随机抽签
随机抽取一个小组
随机抽取2名学生
</div>
<div class="result-container">
<div class="result-text">请先选择班级</div>
</div>
</div>
0.5 - Math.random());
const selected = shuffled.slice(0, 2);
const resultContainer = document.getElementById('resultContainer');
resultContainer.innerHTML = `
<div class="two-students">
<div class="student-name selected">${selected[0]}</div>
<div class="student-name selected">${selected[1]}</div>
</div>
`;
}
