类型：组件 · 分类：卡片 · 收录：2026-09-19 · 源码：会员可见
[hidecontent type="vip1"]<div class="card">
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
<div class="star star-5"></div>
<div class="star star-6"></div>
<div class="star star-7"></div>
<div class="card-info">
<span>To the moon!</span>
</div>
<svg class="moon" viewBox="0 0 20 20">
<path d="M 10 9 z z M 7.007 6.552 c 0 -2.259 0.795 -4.33 2.117 -5.955 C 4.34 1.042 0.594 5.07 0.594 9.98 c 0 5.207 4.211 9.426 9.406 9.426 c 2.94 0 5.972 -1.354 7.696 -3.472 c -0.289 0.026 -0.987 0.044 -1.283 0.044 C 11.219 15.979 7.007 11.759 7.007 6.552 z"></path></svg>
<svg class="rocket" viewBox="48.0129 48.1783 416 415.6">
<path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z"></path></svg>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, star, moon, rotate, keyframes, rocket */
.card {
width: 290px;
height: 350px;
background: linear-gradient(135deg, rgba(48,48,48,1) 48%, rgba(0,0,0,1) 100%);
background-size: 300%,300%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 15px;
box-shadow: 5px 5px 15px 5px #000000;
overflow: hidden;
transition: all 1s ease;
}
.moon {
width: 70px;
height: 70px;
top: 15%;
right: 120px;
position: absolute;
fill: white;
transform: rotate(-20deg);
transition: all 1s ease;
}
.rocket {
width: 70px;
height: 70px;
bottom: -2%;
left: -2%;
position: absolute;
fill: white;
transition: all 1.9s ease;
}
.star {
position: absolute;
background: radial-gradient(circle, rgba(251,239,63,1) 0%, rgba(255,253,212,1) 100%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star-1 {
width: 100px;
height: 100px;
bottom: 90px;
left: -15px;
transition: all 1s ease;
}
.star-2 {
width: 150px;
height: 150px;
top: -10%;
left: -10%;
transition: all .5s ease;
}
.star-3 {
width: 100px;
height: 100px;
bottom: 5%;
right: -15px;
transition: all .3s ease;
}
.star-4 {
width: 20px;
height: 20px;
top: 4%;
right: 5px;
transition: all 1.4s ease;
}
.star-5 {
width: 20px;
height: 20px;
bottom: 24%;
right: 45%;
animation: rotate 3s normal linear infinite;
}
.star-6 {
width: 20px;
height: 20px;
top: 14%;
right: 25%;
animation: rotate 5s normal linear infinite;
}
.star-7 {
width: 40px;
height: 40px;
top: 34%;
right: 65%;
animation: rotate 5s normal linear infinite;
}
.card-info span {
font-size: 1.2em;
color: white;
font-weight: 600;
text-transform: uppercase;
transition: all 1s ease;
}
.card:hover {
background: rgb(48,48,48);
background: linear-gradient(135deg, rgba(48,48,48,1) 10%, rgba(0,0,0,1) 90%);
background-size: 100%,100%;
}
.card:hover .star-1,
.card:hover .star-3 {
background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);
transform: scale(1.2) rotate(10deg);
}
.card:hover .star-2,
.card:hover .star-4,
.card:hover .star-5 {
background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);
transform: scale(1.2) rotate(-150deg);
}
.card:hover .rocket {
transform: scale(.3) translate(450px,-730px) rotate(-260deg);
}
.card:hover .moon {
width: 50px;
height: 50px;
}
.card:hover span {
font-size: 1.5em;
}
@keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
25% {
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
}
50% {
-webkit-transform: rotate3d(0, 0, 1, 180deg);
transform: rotate3d(0, 0, 1, 180deg);
}
75% {
-webkit-transform: rotate3d(0, 0, 1, 270deg);
transform: rotate3d(0, 0, 1, 270deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
</style>