这篇文章展示了如何使用CSS创建动态效果，包括爆炸图片、奖品缩放和得分板的设计，以及基本的前端交互元素如按钮。
}
/* 爆炸图片 */
img.boom {
position: absolute;
animation: opa 1s;
}
@keyframes opa {
0% {
opacity: 1;
}
25% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* prize */
.prize {
position: absolute;
width: 50px;
height: 50px;
font-size: 50px;
text-align: center;
line-height: 50px;
border: 1px dashed red;
color: red;
font-weight: bold;
animation: prize 1s infinite;
}
@keyframes prize {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* 得分板 */
.score {
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 30px;
color: #fff;
font-size: 20px;
}
/* 记录得分 */
.record {
width: 60%;
height: 100px;
margin: 100px auto;
background: #000;
padding: 10px;
border: 4px double #fff;
color: #fff;
}
.record p {
height: 50px;
font-size: 40px;
font-weight: bold;
text-align: center;
color: skyblue;
}
/* 再来一次 */
.btn {
position: absolute;
bottom: 50px;
right: 0;
left: 0;
margin: auto;
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
border-radius: 10px;
background: #000;
cursor: pointer;
}
737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
