用hlmt做一个奖杯弹窗
时间: 2023-05-21 22:07:02 浏览: 164
一款漂亮的弹窗
您好,非常感谢您提出的问题。您可以在 hlmt 中使用 css 动画和 transit effect 创建奖杯弹窗。具体的代码可以如下:
HTML:
```
<div class="trophy">
<h2>Congratulations!</h2>
<p>You have won the trophy!</p>
</div>
```
CSS:
```
.trophy {
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 5px;
border: 2px solid #000;
z-index: 999;
animation-name: pop-up;
animation-duration: 1s;
}
.trophy h2 {
font-size: 28px;
margin-bottom: 10px;
}
.trophy p {
font-size: 18px;
}
@keyframes pop-up {
0% {
transform: scale(0);
}
70% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
```
希望这个代码可以帮助您创建一个漂亮的奖杯弹窗。如果您有任何其他问题,请随时问我。
阅读全文